/* ================================================================ STYLES CUSTOM — Artpulsion Overrides et extensions spécifiques au projet. Ne pas modifier styles-v2.css directement. ================================================================ */ /* ---- LIENS ÉDITORIAUX (contenu wysiwyg) ---- */ /* * Le reset global `a { text-decoration: none }` de styles-v2.css * masque les liens dans le contenu rédactionnel. * On rétablit le soulignement dans les zones de texte éditorial. */ .about__text a, .atelier_texte__content a, .video-description a { text-decoration: underline; text-underline-offset: 3px; } .about__text a:hover, .atelier_texte__content a:hover, .video-description a:hover { text-decoration: none; } /* ---- LAYOUT : footer toujours en bas de l'écran ---- */ /* * A11yToolkit injecte un

qui absorbe * tout le contenu de (header, main, footer). Ce wrapper est * le seul enfant flex actif de body — il doit donc lui-même être * un flex container pour que main { flex: 1 } puisse repousser * le footer en bas. * Sans #a11y-zoom-wrapper (avant init JS), main et footer sont * directement enfants de body : le même schéma s'applique. */ body { min-height: 100vh; display: flex; flex-direction: column; } #a11y-zoom-wrapper { flex: 1; display: flex; flex-direction: column; } main { flex: 1; } /* ---- HERO : iframe Vimeo en background ---- */ /* * L'iframe ne supporte pas object-fit: cover. * Technique overscale : on surdimensionne l'iframe (16/9 basé sur vh/vw) * et on centre avec translate, puis min-width/min-height: 100% garantit * la couverture totale quelle que soit la proportion du viewport. */ .hero__video-iframe { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: 177.78vh; /* 100vh × 16/9 */ height: 56.25vw; /* 100vw × 9/16 */ transform: translate(-50%, -50%); border: none; pointer-events: none; } /* ---- BLOC TEXT : atelier__header étendu ---- */ /* Padding bas quand du contenu (descr1 / image / link) suit le titre */ .atelier__header--has-content { padding-bottom: 3rem; } /* Zone de texte alignée à gauche (override du text-align: center de .atelier__header) */ .atelier_texte { text-align: left; margin-top: 2rem; } /* Layout 2 colonnes lorsqu'une image est présente */ .atelier_texte--with-image { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } /* Image dans la colonne gauche */ .atelier_texte__image img { width: 100%; height: auto; display: block; } /* CTA lien */ .atelier_texte__cta { display: inline-block; margin-top: 1.5rem; color: var(--color-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .atelier_texte__cta:hover { text-decoration: none; } /* Responsive : stack 1 colonne sous 768px */ @media (max-width: 767px) { .atelier_texte--with-image { grid-template-columns: 1fr; gap: 1.5rem; } .atelier__header--has-content { padding-bottom: 2rem; } } /* ---- BLOC TEXT : image à droite ---- */ /* * Inverse l'ordre des colonnes de la grille CSS via order. * Actif uniquement quand image_position === 'right' (classe ajoutée dans text.php). */ .atelier_texte--image-right .atelier_texte__image { order: 2; } .atelier_texte--image-right .atelier_texte__content { order: 1; } /* ---- BLOC TEXT : suppression bordure basse ---- */ /* * La ligne de séparation est portée par atelier_grid (border-top). * .atelier--no-hover est exclusif au bloc text dans ce projet. * Spécificité identique à .atelier — l'ordre des feuilles suffit, sans !important. */ .atelier--no-hover { border-bottom: none; } .atelier { border-bottom: none; } .atelier--no-hover .atelier__header { border-bottom: none; } /* ---- BLOC ATELIER GRID : bordure haute structurelle ---- */ /* * Remplace le border-top:1px solid #000 précédemment inline dans $bgStyle. * S'applique désormais quelle que soit la présence d'une image de fond. */ .atelier__grid { border-top: var(--border-width) solid var(--color-black); } /* ---- TITLE-HIGHLIGHT : isolation du contexte d'empilement ---- */ /* * Sans isolation, les pseudo-éléments z-index: -1 vont dans le stacking context * parent (parfois un ancêtre avec z-index > 0, ex: .atelier__step-content). * isolation: isolate crée un stacking context autonome : les décorations * restent garanties sous le texte mais au-dessus du fond, quelle que soit * la profondeur DOM — titre h2 ou paragraphe courant. */ .title-highlight { isolation: isolate; } /* ---- BLOC SPACER : bordures latérales (cohérence avec les autres sections) ---- */ .spacer { border: var(--border-width) solid var(--color-black); border-top: none; border-bottom: none; } /* ---- BLOC TEMOIGNAGES : grille 4 colonnes ---- */ /* * Styles entièrement dédiés — aucune dépendance aux classes patchwork__item*. * .patchwork sur la section donne le fond jaune pleine largeur. */ .temoignages__grid { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px; } @media (min-width: 600px) { .temoignages__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } } @media (min-width: 768px) { .temoignages__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (min-width: 1200px) { .temoignages__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px; } } /* Carte individuelle — styles autonomes */ .temoignages__item { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--color-primary); color: var(--color-black); text-align: left; min-height: 560px; cursor: default; transition: background-color 0.2s ease; } /* Sans image : fond blanc */ .temoignages__item:not(.temoignages__item--with-image) { background: var(--color-white); } .temoignages__item:not(.temoignages__item--with-image):hover { background-color: #f0f0f0; } /* Avec image : hover ne change pas le fond (overlay suffit) */ .temoignages__item--with-image:hover { background-color: transparent; } /* Conteneur principal : deux zones (body + meta) */ /* flex: 1 (pas height: 100%) pour s'étirer dans le flex parent */ .temoignages__content { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; } /* Zone texte (quote + description) — flex: 1 pour occuper l'espace, centré verticalement */ .temoignages__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } /* Zone auteur — collée en bas à gauche */ .temoignages__meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-top: 1.25rem; } /* Guillemets décoratifs (ouverture et fermeture) */ .temoignages__quote { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 0.9; display: block; margin-bottom: 0.5rem; color: var(--color-primary); } .temoignages__quote--close { margin-top: 0.4rem; text-align: right; align-self: flex-end; } /* Corps du témoignage — légèrement agrandi */ .temoignages__text { font-size: 1rem; line-height: 1.65; margin: 0; } /* Société (ligne 1) — identique à .patchwork__tag */ .temoignages__societe { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3rem 0.6rem; background: var(--color-primary); color: var(--color-black); display: inline-block; margin-bottom: 0.5rem; } /* Nom (ligne 2) — identique à .patchwork__title */ .temoignages__author { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: block; } @media (min-width: 768px) { .temoignages__author { font-size: 1.1rem; } } /* Poste (ligne 3) — identique à .patchwork__subtitle */ .temoignages__poste { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; display: block; margin-top: 0.25rem; } @media (max-width: 599px) { .temoignages__item { min-height: 200px; } } /* Carte avec image en background */ .temoignages__item--with-image { background-size: cover; background-position: center; color: var(--color-white); } /* Annuler le fond jaune au hover (l'overlay suffit) */ .temoignages__item--with-image:hover { background-color: transparent; } /* Overlay gradient pour lisibilité du texte */ .temoignages__item--with-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%); z-index: 1; transition: background 0.4s ease; } /* Hover : overlay légèrement plus sombre */ .temoignages__item--with-image:hover::before { background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%); } /* Contenu au-dessus de l'overlay */ .temoignages__item--with-image .temoignages__content { position: relative; z-index: 2; } /* ---- Carte témoignage avec vidéo ---- */ /* Pas d'overlay ::before, pas de color white → contrôles vidéo cliquables, meta lisible */ /* Supprimer le padding du content pour que la vidéo soit edge-to-edge */ .temoignages__item--with-video .temoignages__content { padding: 0; } /* Body = zone vidéo plein espace, fond noir */ .temoignages__item--with-video .temoignages__body { position: relative; background: #000; } /* Wrapper vidéo : remplit tout le body via absolute */ .temoignages__video-wrapper { position: absolute; inset: 0; overflow: hidden; } /* Iframe (YouTube / Vimeo) */ .temoignages__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Vidéo HTML5 (fichier direct) */ .temoignages__video-wrapper video { width: 100%; height: 100%; object-fit: cover; } /* Meta sous la vidéo : padding propre, pas de margin-top parasite, texte noir (fond clair hérité) */ .temoignages__item--with-video .temoignages__meta { padding: 1rem 1.5rem; margin-top: 0; } /* ---- BLOC ÉQUIPE : grille 3 colonnes standard ---- */ /* * .patchwork donne déjà background: var(--color-primary) pleine largeur. * .equipe__container centre la grille avec un max-width. */ .equipe__container { max-width: 2000px; margin: 0 auto; padding: 8px; } .equipe__grid { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 600px) { .equipe__container { padding: 10px; } .equipe__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (min-width: 900px) { .equipe__container { padding: 12px; } .equipe__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } /* Item équipe — ratio portrait pour les photos de personnes */ .equipe__item { aspect-ratio: 3 / 4; cursor: default; } /* Fallback sans image : fond sombre */ .equipe__item--no-image { background-color: var(--color-black); color: var(--color-white); } /* * Les items utilisent — le JS détecte l'image, * anime le chargement et ajoute .loaded (qui rend overlay + contenu visibles). * Items sans image : .loaded ajouté en PHP → contenu toujours visible. */ /* Contenu positionné en bas à gauche (override justify-content) */ .equipe__item .patchwork__content { justify-content: flex-end; align-items: flex-start; gap: 2px; } /* Nom : Prénom NOM */ .equipe__nom { font-weight: 800; font-size: clamp(0.9rem, 1.5vw, 1.05rem); text-transform: uppercase; letter-spacing: 0.06em; display: block; line-height: 1.2; } /* Poste */ .equipe__poste { font-size: 0.8rem; display: block; margin-top: 2px; opacity: 0.85; } @media (max-width: 599px) { .equipe__item { aspect-ratio: 4 / 5; } } /* ---- BLOC CLIENTS : grille 5 colonnes logos ---- */ /* * Préfixe clients-bloc__ pour éviter le conflit avec .clients__logo * de styles-v2.css (home page, a border-right + opacity: 0.6). * Styles entièrement dédiés — aucune dépendance aux classes patchwork__item*. * .patchwork sur la section donne le fond jaune pleine largeur. */ .clients-bloc__container { max-width: 100%; margin: 0 auto; padding: 8px; } .clients-bloc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 650px) { .clients-bloc__container { padding: 10px; } .clients-bloc__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (min-width: 1000px) { .clients-bloc__container { padding: 12px; } .clients-bloc__grid { grid-template-columns: repeat(5, 1fr); gap: 12px; } } /* Item — fond blanc, centrage flex, ratio paysage */ .clients-bloc__item { aspect-ratio: 4 / 3; background: var(--color-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; overflow: hidden; cursor: default; transition: background-color 0.2s ease; text-decoration: none; color: var(--color-black); } /* Item cliquable */ a.clients-bloc__item { cursor: pointer; } /* Hover */ .clients-bloc__item:hover { background-color: #f0f0f0; } /* Logo */ .clients-bloc__img { width: 85%; max-height: 70%; object-fit: contain; display: block; mix-blend-mode: multiply; /* fond blanc du logo transparent → hover visible */ transition: transform 0.35s ease; } /* Animation logo au survol */ .clients-bloc__item:hover .clients-bloc__img { transform: scale(1.06); } /* ---- BLOC CONTACT : formulaire de contact / devis ---- */ /* * Styles entièrement dédiés — préfixe contact-form__ pour isolation complète. * Section fond blanc (pas .patchwork) : plus approprié pour un formulaire pro. * Bordures latérales cohérentes avec le système global. */ .contact-form__section { background: var(--color-primary); border-left: var(--border-width) solid var(--color-black); border-right: var(--border-width) solid var(--color-black); padding: 4rem 3rem; } .contact-form__container { max-width: 960px; margin: 0 auto; } .contact-form__title { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2rem; color: var(--color-black); text-align: center; } /* Variante highlight sur fond primary : ajouter .on-primary sur le container */ .on-primary .title-highlight::before, .on-primary .title-highlight__dots, .on-primary .title-highlight__dots::before { background: #fff; } /* Grille 2 colonnes */ .contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-form__field--full { grid-column: 1 / -1; } /* Label — uppercase bold cohérent avec la typo du site */ .contact-form__label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; color: var(--color-black); } .contact-form__required { color: var(--color-black); margin-left: 0.15rem; } .contact-form__label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.7rem; opacity: 0.55; margin-left: 0.35rem; } /* Inputs, selects, textarea — bordure noire, sans border-radius */ .contact-form__input, .contact-form__select, .contact-form__textarea { width: 100%; padding: 0.75rem 1rem; border: var(--border-width) solid var(--color-black); background: var(--color-white); font-family: var(--font-main); font-size: 0.9rem; color: var(--color-black); appearance: none; -webkit-appearance: none; border-radius: 0; transition: background-color 0.2s ease; outline: none; box-sizing: border-box; } /* Focus : fond jaune on-brand */ .contact-form__input:focus, .contact-form__select:focus, .contact-form__textarea:focus { background: var(--color-primary); } /* Select : flèche SVG inline (triangle noir) */ .contact-form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } /* Textarea */ .contact-form__textarea { resize: vertical; min-height: 140px; line-height: 1.6; } /* Champ fichier */ .contact-form__input--file { cursor: pointer; border-style: dashed; padding: 0.5rem 1rem; } /* Erreurs formulaire contact */ .contact-form__errors { padding: 1rem 1.5rem; margin-bottom: 1.5rem; background: rgba(255, 255, 255, 0.85); border: var(--border-width, 2px) solid var(--color-black); font-size: 0.85rem; color: var(--color-black); } .contact-form__errors ul { margin: 0; padding-left: 1.2rem; list-style: disc; } .contact-form__errors li { margin-bottom: 0.25rem; } .contact-form__errors p { margin: 0; } /* Message succès formulaire contact */ .contact-form__success { padding: 2.5rem 2rem; background: var(--color-white, #fff); border: var(--border-width, 2px) solid var(--color-black); text-align: center; font-size: 1rem; line-height: 1.6; } .contact-form__success p { margin: 0; font-weight: 600; } /* Bouton submit : état loading */ .contact-form__submit--loading { opacity: 0.6; cursor: wait; } /* Recaptcha placeholder */ .contact-form__recaptcha { min-height: 78px; border: 1px dashed rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; background: var(--color-gray-light, #f5f5f5); } .contact-form__recaptcha::after { content: 'Recaptcha'; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.35; color: var(--color-black); } /* Bouton submit : fond noir → hover jaune */ .contact-form__submit { display: inline-block; padding: 1rem 3rem; background: var(--color-black); color: var(--color-white); font-family: var(--font-main); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 0; box-shadow: none; outline: none; transition: background-color 0.2s ease, color 0.2s ease; } .contact-form__submit:hover { background: var(--color-primary); color: var(--color-black); } /* Responsive : 1 colonne sous 768px */ @media (max-width: 767px) { .contact-form__section { padding: 2.5rem 1.5rem; } .contact-form__grid { grid-template-columns: 1fr; gap: 1.25rem; } .contact-form__field--full { grid-column: 1; } } /* ---- BLOC SHOWCASE : item stat cliquable ---- */ /* * Quand un lien est renseigné, l'item stat devient un . * Reset des styles navigateur pour conserver le rendu visuel identique. */ a.showcase__item--stat { text-decoration: none; color: inherit; cursor: pointer; } /* ================================================================ SCROLL SMOOTH GLOBAL ================================================================ */ html { scroll-behavior: smooth; } /* ================================================================ RÉALISATION — PAGE DÉTAIL ================================================================ */ /* Compense le header fixe (78px) */ .realisation-detail { margin-top: 78px; } /* ─── Hero image ──────────────────────────────────────────────── */ .realisation-detail__hero { position: relative; width: 100%; height: clamp(300px, 55vh, 650px); overflow: hidden; background: #111; } .realisation-detail__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Gradient identique à .patchwork__overlay */ .realisation-detail__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); } /* Contenu en bas à gauche — identique à .patchwork__item--image .patchwork__content */ .realisation-detail__hero-content { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; color: #fff; gap: 0.35rem; } /* ─── Hero texte (fallback sans image) ───────────────────────── */ .realisation-detail__hero-text { background: var(--color-primary); padding: 3.5rem 0 3rem; } .realisation-detail__hero-text .patchwork__tag { margin-bottom: 0.4rem; } /* ─── Titre & Tagline ─────────────────────────────────────────── */ .realisation-detail__title { font-family: 'Oswald', sans-serif; font-size: clamp(1.8rem, 5vw, 3.5rem); font-weight: 600; text-transform: uppercase; line-height: 1.1; margin: 0; color: #fff; } .realisation-detail__title--plain { color: #000; margin-top: 0.5rem; } .realisation-detail__tagline { font-size: 1rem; opacity: 0.85; margin: 0; color: #fff; } .realisation-detail__tagline--plain { color: #000; opacity: 1; } /* ─── Corps du contenu ────────────────────────────────────────── */ .realisation-detail__body { padding: 3.5rem 0 5rem; } .realisation-detail__body .container { max-width: 960px; margin-left: auto; margin-right: auto; } /* ─── Navigation prev/next ───────────────────────────────────── */ .realisation-detail__nav { background: var(--color-black); color: var(--color-white); width: 100%; } .realisation-detail__nav-inner { display: flex; align-items: stretch; width: 100%; } .realisation-detail__nav-link { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.5rem; color: var(--color-white); text-decoration: none; transition: background-color 0.2s ease; } .realisation-detail__nav-link:hover { background: var(--color-primary); } .realisation-detail__nav-link:hover .realisation-detail__nav-title { color: var(--color-black); } .realisation-detail__nav-link:hover .realisation-detail__nav-label { color: #555; opacity: 1; } .realisation-detail__nav-link--empty { pointer-events: none; } .realisation-detail__nav-link--next { justify-content: flex-end; text-align: right; } .realisation-detail__nav-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .realisation-detail__nav-label { font-family: var(--font-main); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; } .realisation-detail__nav-title { font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .realisation-detail__nav-arrow { flex-shrink: 0; opacity: 0.6; transition: opacity 0.2s ease, transform 0.2s ease; } .realisation-detail__nav-link:hover .realisation-detail__nav-arrow { color: #555; opacity: 1; } .realisation-detail__nav-link--prev:hover .realisation-detail__nav-arrow { transform: translateX(-3px); } .realisation-detail__nav-link--next:hover .realisation-detail__nav-arrow { transform: translateX(3px); } .realisation-detail__nav-center { display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.5rem; color: var(--color-white); text-decoration: none; transition: background-color 0.2s ease; flex-shrink: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .realisation-detail__nav-center:hover { background: var(--color-primary); } .realisation-detail__nav-grid-icon { opacity: 0.6; transition: opacity 0.2s ease, color 0.2s ease; } .realisation-detail__nav-center:hover .realisation-detail__nav-grid-icon { color: #555; opacity: 1; } /* Description */ .realisation-detail__description { font-size: 1rem; line-height: 1.8; margin-bottom: 2.5rem; } .realisation-detail__description ul { list-style-position: inside; padding-left: 0; } /* Boutons document + lien externe */ .realisation-detail__doc-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .realisation-detail__doc { display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-black); text-decoration: none; padding: 0.7rem 1.75rem; background: var(--color-primary); transition: background 0.2s ease, color 0.2s ease; } .realisation-detail__doc:hover { background: var(--color-primary-dark); } /* ─── Fiche technique ──────────────────────────────────────────── */ .realisation-detail__fiche { margin-bottom: 2.5rem; padding: 2rem; border: var(--border-width) solid var(--color-black); background-color: var(--color-primary); } .realisation-detail__fiche-title { font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 1.25rem 0; padding-bottom: 0.75rem; border-bottom: var(--border-width) solid var(--color-black); } .realisation-detail__fiche-list { margin: 0; padding: 0; } .realisation-detail__fiche-row { display: flex; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .realisation-detail__fiche-row:last-child { border-bottom: none; } .realisation-detail__fiche-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; min-width: 120px; flex-shrink: 0; color: var(--color-black); } .realisation-detail__fiche-value { font-size: 0.95rem; margin: 0; padding-left: 1rem; color: var(--color-black); } .realisation-detail__fiche-value a { color: var(--color-black); text-decoration: underline; text-underline-offset: 3px; } .realisation-detail__fiche-value a:hover { text-decoration: none; } /* ─── Galerie réalisations ──────────────────────────────────────── */ .realisation-detail__gallery .patchwork__item { cursor: default; } /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .realisation-detail { margin-top: 60px; } .realisation-detail__hero { height: clamp(220px, 48vw, 360px); } .realisation-detail__body { padding: 2.5rem 0 3.5rem; } .realisation-detail__nav-text { display: none; } .realisation-detail__nav-link { flex: 1; justify-content: center; padding: 1rem; } .realisation-detail__nav-link--next { justify-content: center; } .realisation-detail__nav-link--empty { pointer-events: none; } .realisation-detail__nav-arrow { opacity: 0.8; } .realisation-detail__fiche { padding: 1.25rem; } .realisation-detail__fiche-row { flex-direction: column; gap: 0.15rem; } .realisation-detail__fiche-label { min-width: auto; } .realisation-detail__fiche-value { padding-left: 0; } } /* ================================================================ PATCHWORK FILTERS — Barre de filtres tag (réalisations) ================================================================ */ .patchwork__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; padding: 1.5rem 12px; } .patchwork__filters-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-black); margin-right: 0.5rem; opacity: 0.5; } .patchwork__filter-btn { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.6rem 1.2rem; background: var(--color-black); color: var(--color-white); border: none; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 0; box-shadow: none; outline: none; transition: background-color 0.2s ease, color 0.2s ease; } .patchwork__filter-btn:hover { background: rgba(0, 0, 0, 0.7); } .patchwork__filter-btn--active { background: var(--color-primary); color: var(--color-black); } @media (max-width: 1023px) and (min-width: 600px) { .patchwork__filters { padding: 1.25rem 10px; } } @media (max-width: 599px) { .patchwork__filters { padding: 1rem 8px; } .patchwork__filters-label { width: 100%; margin-bottom: 0.5rem; } .patchwork__filter-btn { padding: 0.5rem 0.8rem; font-size: 0.7rem; flex: 1 1 auto; text-align: center; } }