/* Polices chargées via dans le de chaque page, pour un affichage plus rapide */ :root { color-scheme: dark; font-family: 'tt-commons-pro', sans-serif; background: #0e0e0e; color: #fcfcfc; font-size: 16px; line-height: 1.6; --bg: #0e0e0e; --text: #fcfcfc; --muted-white: rgba(252, 252, 252, 0.78); --muted-black: rgba(14, 14, 14, 0.7); --card: rgba(255, 255, 255, 0.06); --border: rgba(252, 252, 252, 0.12); --border-dark: rgba(14, 14, 14, 0.12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Filet de sécurité : empêche tout élément large (bandeau défilant, logos partenaires, etc.) de faire déborder la largeur de la page sur mobile, ce qui provoquait un décalage horizontal au toucher et un site qui ne remplissait plus tout l'écran. overflow-x: clip est ajouté après hidden car Safari mobile peut élargir la page malgré overflow:hidden seul ; clip l'interdit explicitement (les navigateurs qui ne le supportent pas ignorent cette ligne et gardent "hidden"). */ overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; } /* Le scroll-snap "façon desktop" (molette) ne doit s'appliquer qu'aux écrans avec souris/trackpad. Sur mobile Safari, scroll-snap-type + scroll-snap-stop:always combinés à 100vh (qui change quand la barre d'adresse se rétracte pendant le scroll tactile) provoquent un scroll qui "recule tout seul" / reste bloqué. On désactive donc le snap par défaut (y compris tablette tactile) et on ne le réactive que sur les vrais écrans desktop (souris fine + hover). Le JS du scroll-slide n'écoute que l'événement "wheel", jamais déclenché par un scroll tactile, donc ce n'est que le CSS de snap qu'il faut neutraliser sur mobile. */ html.has-scroll-slides { scroll-snap-type: none; } @media (min-width: 701px) and (hover: hover) and (pointer: fine) { html.has-scroll-slides { scroll-snap-type: y proximity; } } .scroll-slide { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100dvh; } body { margin: 0; min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; position: relative; background: var(--bg); color: var(--text); font-family: 'tt-commons-pro', sans-serif; font-weight: 400; } img { max-width: 100%; display: block; } a { color: inherit; } .skip-link { position: absolute; left: -9999px; top: 0; background: #fcfcfc; color: #0e0e0e; padding: 1rem 1.5rem; z-index: 100; border-radius: 0; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { width: min(1440px, 100%); margin: 0 auto; padding: 0 100px; } @media (max-width: 1100px) { .container { padding: 0 1.25rem; } } .grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; align-items: center; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-6 { grid-column: span 6; } .col-4-6 { grid-column: 4 / span 3; } .col-5-6 { grid-column: 5 / span 2; } .col-2-3 { grid-column: 2 / span 2; } .col-3-4 { grid-column: 3 / span 2; } .col-3-6 { grid-column: 3 / span 4; } .contact-illustration { grid-row: 1; align-self: center; } .contact-final.col-4-6 { grid-row: 1; } .contact-illustration img { width: 100%; max-width: 260px; height: auto; margin: 0 auto; display: block; } @media (max-width: 900px) { .contact-illustration { order: 2; margin-top: 2rem; grid-row: auto; } } .col-start-4 { grid-column-start: 4; } /* Header */ .site-header { position: sticky; top: 0; z-index: 20; background: #0e0e0e; color: #fcfcfc; border-bottom: 1px solid rgba(252, 252, 252, 0.1); transition: transform 0.3s ease; } .header-hidden { transform: translateY(-100%); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand-logo { height: 48px; width: auto; filter: invert(1); } .desktop-nav { display: none; gap: 2rem; margin-right: auto; margin-left: 2.5rem; } .desktop-nav a { text-decoration: none; color: #0e0e0e; font-weight: 400; font-size: 1rem; letter-spacing: 0.01em; transition: opacity 0.2s ease; } .desktop-nav a:hover { opacity: 0.6; } .header-cta { display: none; } /* Un peu plus discret que les autres boutons du site : dans l'en-tête, il est juste à côté des liens de nav (font-size 1rem), donc une hauteur/typo trop proche des gros boutons de contenu paraissait disproportionnée. Sélecteur renforcé (.header-actions .header-cta) : même spécificité que .button sinon, et .button est déclaré plus loin dans le fichier donc gagnerait la cascade sur min-height/padding/font-size par ordre de source. */ .header-cta { display: inline-flex; } .header-actions .header-cta { min-height: 38px; padding: 0 1.1rem; font-size: 0.9rem; } @media (max-width: 700px) { /* Sur mobile, le CTA passe dans le menu déroulant pour alléger l'en-tête. Sélecteur renforcé (.header-actions .header-cta) pour passer devant la règle générique .button { display: inline-flex } définie plus loin dans la feuille de style, à spécificité égale sinon. */ .header-actions .header-cta { display: none; } } .header-actions { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .lang-indicator { display: inline-flex; align-items: center; justify-content: center; font-family: 'tt-commons-pro', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: #fcfcfc; border: 1px solid rgba(252, 252, 252, 0.4); border-radius: 999px; padding: 0.3rem 0.65rem; line-height: 1; } .lang-switcher { position: relative; } .lang-switcher-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font-family: 'tt-commons-pro', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: #fcfcfc; background: transparent; border: 1px solid rgba(252, 252, 252, 0.4); border-radius: 999px; padding: 0.3rem 0.65rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .lang-switcher-toggle:hover { background: rgba(252, 252, 252, 0.08); } .lang-switcher-toggle::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; } .lang-switcher.is-open .lang-switcher-toggle::after { transform: rotate(225deg) translateY(1px); } .lang-switcher-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; list-style: none; margin: 0; padding: 0.4rem; background: #171717; border: 1px solid rgba(252, 252, 252, 0.15); border-radius: 14px; min-width: 140px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); z-index: 20; } .lang-switcher-menu[hidden] { display: none; } .lang-switcher-menu a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 8px; font-family: 'tt-commons-pro', sans-serif; font-size: 0.85rem; color: rgba(252, 252, 252, 0.8); text-decoration: none; } .lang-switcher-menu a:hover { background: rgba(252, 252, 252, 0.08); color: #fcfcfc; } .lang-switcher-menu a[aria-current="true"] { color: #fcfcfc; font-weight: 600; } .lang-switcher-menu a[aria-current="true"]::after { content: '✓'; font-size: 0.75rem; } @media (max-width: 700px) { .lang-switcher-menu { right: auto; left: 0; } } .menu-toggle { display: inline-flex; flex-direction: column; justify-content: space-between; width: 2rem; height: 1.5rem; padding: 0; border: none; background: transparent; cursor: pointer; } .menu-toggle span { display: block; height: 2px; background: #fcfcfc; border-radius: 999px; } .mobile-menu { position: fixed; inset: 0; background: #fcfcfc; color: #0e0e0e; visibility: hidden; opacity: 0; transform: translateY(-5%); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 30; padding: 3rem 0 0; overflow-y: auto; } .mobile-menu.open { visibility: visible; opacity: 1; transform: translateY(0); } .menu-close { position: absolute; top: 1.5rem; right: 1.5rem; border: none; background: transparent; font-size: 2.5rem; line-height: 1; cursor: pointer; color: #0e0e0e; } .mobile-nav { display: flex; flex-direction: column; width: 100%; margin-top: 4rem; } .mobile-nav a { font-family: 'DM Serif Display', serif; font-size: 2rem; text-decoration: none; color: #0e0e0e; display: block; width: 100%; padding: 1rem 1.5rem; border-radius: 0; transition: background 0.2s ease, color 0.2s ease; } .mobile-nav a:hover, .mobile-nav a:focus-visible { background: #0e0e0e; color: #fcfcfc; } /* Sections */ .section { padding: 4rem 0; } .contact-section { padding: 80px 0 40px; } .section.white { background-color: #fcfcfc; color: #0e0e0e; } .section.black { background-color: #0e0e0e; color: #fcfcfc; } .section.white h1, .section.white h2, .section.white h3, .section.white p, .section.white li, .section.white label { color: #0e0e0e; } .section.black h1, .section.black h2, .section.black h3, .section.black p, .section.black li, .section.black label { color: #fcfcfc; } .section h2 { margin-top: 0; margin-bottom: 1.5rem; } .h2-mark { font-family: 'tt-commons-pro', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 0.65; display: inline; padding: 0.02em 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .section.white .h2-mark { background-image: linear-gradient(rgba(222, 222, 220, 0.82), rgba(222, 222, 220, 0.82)); background-repeat: no-repeat; background-size: 0% 40%; background-position: 0 58%; transition: background-size 0.9s ease; } .section.white .h2-mark.is-revealed { background-size: 100% 40%; } /* Hero */ .hero-section { min-height: calc(100vh - 64px); display: grid; place-items: center; } .hero-bg { position: relative; background-image: linear-gradient(rgba(252, 252, 252, 0.7), rgba(252, 252, 252, 0.7)), url('assets/hero-bg.jpg'); background-size: cover; background-position: center; } .filmstrip-banner { background-color: #0e0e0e; background-image: url('assets/filmstrip-bg-v2.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; height: clamp(100px, 10vw, 150px); display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; } @media (max-width: 700px) { .filmstrip-banner { background-image: none; height: 60px; } } .filmstrip-text { font-family: 'Nothing You Could Do', cursive; color: #fcfcfc; font-size: clamp(1.3rem, 2.8vw, 2.75rem); text-align: center; white-space: nowrap; margin: 0; } @media (max-width: 700px) { .filmstrip-text { white-space: normal; max-width: 90%; } } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: var(--muted-black); margin: 0 0 1rem; } .hero-copy h1 { margin: 0; font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.01em; } .hero-copy .anecdote { font-family: 'Nothing You Could Do', cursive; font-weight: 400; text-transform: none; letter-spacing: normal; } .hero-copy > p { max-width: 620px; margin: 1.5rem 0 2rem; color: var(--muted-black); font-weight: 400; font-size: 1.125rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } @media (max-width: 700px) { /* Espace resserré entre les deux boutons empilés, et marge basse pour que le dernier bouton ne se retrouve pas juste sous le widget flottant Calendly ("Prendre rendez-vous"), fixe en bas de l'écran. */ .hero-actions { gap: 0.6rem; } .hero-section { padding: 2rem 0 5.5rem; } } /* Buttons */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.4rem; border-radius: 999px; font-family: 'DM Serif Display', serif; font-weight: 400; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; border: 1px solid transparent; letter-spacing: 0.01em; font-size: 1rem; } .button:hover { transform: translateY(-2px); } .button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .button.black { background: #0e0e0e; color: #fcfcfc; border-color: #0e0e0e; } .button.white { background: #fcfcfc; color: #0e0e0e; border-color: #0e0e0e; } .button.white:hover { background: #0e0e0e; color: #fcfcfc; } .button.outline { background: transparent; color: #0e0e0e; border-color: #0e0e0e; } .button.outline:hover { background: #0e0e0e; color: #fcfcfc; } .text-link { display: inline-block; margin-top: 1rem; text-decoration: underline; color: #0e0e0e; font-weight: 700; } .text-link.dark { color: #0e0e0e; } .section.black .text-link { color: #fcfcfc; } /* Banner scroll */ /* Le texte défilant est volontairement bien plus large que l'écran (il est dupliqué pour boucler en fondu). Sur mobile, Safari peut élargir la largeur de page globale pour "loger" ce contenu même s'il est masqué par overflow:hidden. "contain" + "overflow-x: clip" empêchent explicitement ce contenu de peser sur la taille de la page. */ .banner-scroll { padding: 0.5rem 0; overflow: hidden; overflow-x: clip; contain: layout paint; max-width: 100%; } .banner-scroll-content { overflow: hidden; overflow-x: clip; width: 100%; max-width: 100%; } .banner-scroll-text { display: inline-block; white-space: nowrap; padding: 0.4rem 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: 'tt-commons-pro', sans-serif; font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.625rem); animation: scroll-left 55s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* About */ .about-section { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; } .about-section .container:first-child { margin-bottom: 1.5rem; } .about-grid { align-items: stretch; } .about-grid .about-image .image-frame { max-height: 65vh; } .about-grid .about-image { height: 100%; } .about-section .about-grid { align-items: start; } .about-section .about-illustration { height: auto; max-height: none; max-width: 85%; object-fit: contain; } .about-link-right { display: block; text-align: right; } .page-hero-hands { display: flex; align-items: center; justify-content: center; } .page-hero-hands img { width: 100%; max-width: 100%; height: auto; } .section-divider { height: 3px; background: #0e0e0e; } .founder-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .founder-continued { max-width: 900px; margin-top: 1.5rem; } .example-story { margin-top: 1.5rem; } .example-story p { margin: 0 0 1.25rem; color: var(--muted-black); } .example-story-top { align-items: start; margin-bottom: 1.5rem; } .example-illustration { display: flex; align-items: stretch; justify-content: center; } .example-illustration .image-frame-photo { width: 100%; height: 100%; min-height: 320px; max-height: 420px; object-fit: cover; } .example-story-intro p { margin: 0 0 1.25rem; color: var(--muted-black); } .example-story-intro p:last-child { margin-bottom: 0; } .about-grid .about-image .image-frame { height: 100%; min-height: 100%; } .founder-section .about-grid { align-items: start; } .founder-section .about-image { height: auto; } .founder-section .founder-photo { height: auto; } .about-illustration { width: 100%; height: 100%; max-height: 65vh; object-fit: cover; } .image-frame { width: 100%; height: 100%; min-height: 280px; border-radius: 0; background: #1a1a1a; border: 1px solid var(--border); display: grid; place-items: center; color: rgba(252, 252, 252, 0.5); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; text-align: center; padding: 1rem; } .section.white .image-frame { background: #f1f1f1; border-color: var(--border-dark); color: rgba(14, 14, 14, 0.4); } .image-frame-photo { width: 100%; height: 100%; min-height: 280px; object-fit: cover; } .page-hero-jumelle { display: flex; align-items: center; justify-content: center; } .page-hero-jumelle img { width: 100%; max-width: 420px; height: auto; filter: brightness(0) invert(1); } .process-title .h2-mark { font-family: 'DM Serif Display', serif; text-transform: none; letter-spacing: 0; } .process-cta-row { margin-top: 2rem; } .founder-caption { font-family: 'Nothing You Could Do', cursive; font-size: 1.25rem; margin: 0.75rem 0 0; color: #0e0e0e; text-align: center; } .about-content ul { padding-left: 1.25rem; margin: 1.5rem 0; } .founder-timeline { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .founder-timeline li { background: #f6f6f4; border: 1px solid var(--border-dark); border-radius: 999px; padding: 0.6rem 1.1rem; font-size: 0.9rem; color: #0e0e0e; align-self: flex-start; width: fit-content; max-width: 100%; } .founder-timeline li strong { font-weight: 700; } .founder-quote { font-family: 'Nothing You Could Do', cursive; font-size: 1.8rem; line-height: 1.5; margin: 1.5rem 0; } .founder-quote-source { display: block; font-family: 'TT Commons', sans-serif; font-size: 0.85rem; color: var(--muted-black); margin-top: 0.5rem; } .founder-highlight { font-family: 'DM Serif Display', serif; font-size: 1.35rem; line-height: 1.6; color: #0e0e0e; padding-left: 1.25rem; border-left: 3px solid #0e0e0e; } .section.black .founder-highlight { color: #fcfcfc; border-left-color: #fcfcfc; } .about-content li { margin-bottom: 0.85rem; line-height: 1.7; } .why-part + .why-part { margin-top: 2.5rem; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; padding: 1rem 0; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); } .section.black .stat-row { border-color: var(--border); } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; min-width: 0; } /* clamp() plutôt qu'un palier de breakpoint fixe : la taille suit en continu la largeur réelle du viewport (unité vw), donc "10 ans" reste sur une seule ligne même si Safari mobile calcule un viewport effectif légèrement différent de celui mesuré par Chrome/Playwright — pas de seuil exact à faire correspondre. */ .stat-number { font-family: 'DM Serif Display', serif; font-size: clamp(1.35rem, 6vw, 2.5rem); font-weight: 700; line-height: 1.15; white-space: nowrap; } .stat-label { font-size: 0.875rem; color: var(--muted-white); } .section.white .stat-label { color: var(--muted-black); } .about-fullwidth-section { padding: 3rem 0; } .methode-teaser-section { padding: 4.5rem 0; } .methode-teaser-inner { align-items: end; gap: 1.5rem; } .methode-teaser-inner .button { justify-self: end; } .methode-teaser-text { font-family: 'Nothing You Could Do', cursive; font-size: 1.6rem; line-height: 1.5; max-width: 720px; margin: 0; margin-left: auto; text-align: right; color: #fcfcfc; } .methode-teaser-text strong { font-family: 'DM Serif Display', serif; font-weight: 700; font-size: 0.9em; } @media (max-width: 700px) { .methode-teaser-inner { align-items: flex-start; } .methode-teaser-inner .button { order: 2; margin-top: 1.5rem; } .methode-teaser-text { order: 1; } } @media (max-width: 900px) { .work-tags-row { display: none; } .work-tags-mobile-only { display: block; margin-top: 1.5rem; } } .about-fullwidth-section .anecdote { margin: 0; font-size: clamp(1.625rem, 3vw, 2.25rem); text-align: center; font-family: 'Nothing You Could Do', cursive; font-weight: 400; } /* Work teaser */ .work-header { align-items: stretch; margin-bottom: 1.5rem; } .work-side-top p { color: var(--muted-black); margin: 0.5rem 0 0; } .work-tags-row { justify-content: flex-end; align-items: flex-end; } .work-tags-mobile-only { display: none; } .work-teaser-section { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; } .work-teaser-section .container:last-child { margin-top: 1.5rem; } .work-image-frame { height: 60vh; min-height: 400px; border-radius: 0; overflow: hidden; position: relative; background: #f6f6f4; } .carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; display: block; margin: 0; padding: 0; border: none; background: none; font: inherit; text-align: left; cursor: pointer; z-index: 1; } .carousel-slide.is-active { z-index: 2; } .carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; } .carousel-slide.is-active { opacity: 1; } .carousel-slide .masonry-overlay { opacity: 0; } .work-image-frame:hover .carousel-slide.is-active .masonry-overlay, .carousel-slide.is-active .masonry-overlay:focus-within { opacity: 1; } .partner-logo { border: 1px solid rgba(252, 252, 252, 0.25); border-radius: 0; padding: 1rem; text-align: center; color: #fcfcfc; font-size: 0.875rem; background: rgba(14, 14, 14, 0.15); display: flex; align-items: center; justify-content: center; min-height: 90px; width: 220px; flex-shrink: 0; } .partner-logo img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; } .logo-invert { filter: brightness(0) invert(1); } .logo-darken { filter: brightness(0); } .partner-logos-section { background-color: #0e0e0e; background-image: url('assets/filmstrip-bg-v2.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(140px, 12vw, 220px); display: flex; align-items: center; overflow: hidden; /* Même logique que le bandeau défilant : .partner-logos-track fait "width: max-content" (plusieurs milliers de px) pour l'animation en boucle. Ces règles empêchent cette largeur de fuiter vers la page. */ overflow-x: clip; contain: layout paint; max-width: 100%; } .partner-logos-track { display: flex; width: max-content; animation: partner-logos-scroll 45s linear infinite; } .partner-logos-group { display: flex; gap: 1rem; padding-right: 1rem; flex-shrink: 0; } @keyframes partner-logos-scroll { 0% { transform: translate(0, -13px); } 100% { transform: translate(-25%, -13px); } } @media (max-width: 700px) { .partner-logos-section { background-image: none; padding-top: 13px; } } /* Offers */ .offers-top { align-items: end; margin-bottom: 1.25rem; } .offer-title .anecdote { font-family: 'Nothing You Could Do', cursive; font-size: 1.25rem; margin: 0.5rem 0 0; color: var(--muted-white); text-align: left; } .entry-cards { align-items: stretch; } .entry-card { background: #161616; border: 1px solid var(--border); border-radius: 0; padding: 2rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; } .entry-card.featured { background: #fcfcfc; border-color: #fcfcfc; } .entry-card.featured h3, .entry-card.featured p, .entry-card.featured .entry-price { color: #0e0e0e; } .entry-badge { position: absolute; top: -14px; left: 2rem; right: 2rem; background: #0e0e0e; color: #fcfcfc; border: 1px solid rgba(252, 252, 252, 0.5); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.4rem 0.9rem; border-radius: 999px; width: fit-content; white-space: nowrap; } @media (max-width: 380px) { .entry-badge { white-space: normal; text-align: center; } } .entry-icon { width: 100%; height: 130px; margin: 0 auto 0.5rem; } @media (max-width: 900px) { .entry-icon { width: 100%; height: 130px; } } .entry-icon svg, .entry-icon img { width: 100%; height: 100%; object-fit: contain; } .entry-card h3 { margin: 0; text-transform: none; font-size: 1.5rem; font-family: 'DM Serif Display', serif; font-weight: 700; letter-spacing: 0.01em; } .entry-card p { margin: 0; color: var(--muted-white); flex-grow: 1; font-weight: 100; } .entry-price { font-weight: 700; color: #fcfcfc; } .entry-card .button { align-self: flex-start; margin-top: 0.5rem; } /* Survol groupé : la carte survolée passe en blanc, les autres en noir */ .entry-cards:has(.entry-card:hover) .entry-card { background: #161616; border-color: var(--border); } .entry-cards:has(.entry-card:hover) .entry-card h3, .entry-cards:has(.entry-card:hover) .entry-card .entry-price { color: #fcfcfc; } .entry-cards:has(.entry-card:hover) .entry-card p { color: var(--muted-white); } .entry-cards:has(.entry-card:hover) .entry-card .button { background: #fcfcfc; color: #0e0e0e; } .entry-cards:has(.entry-card:hover) .entry-card .entry-icon img { filter: brightness(0) invert(1); } .entry-cards .entry-card:hover { background: #fcfcfc !important; border-color: #fcfcfc !important; } .entry-cards .entry-card:hover h3, .entry-cards .entry-card:hover .entry-price { color: #0e0e0e !important; } .entry-cards .entry-card:hover p { color: var(--muted-black) !important; } .entry-cards .entry-card:hover .button { background: #0e0e0e !important; color: #fcfcfc !important; } .entry-cards .entry-card:hover .entry-icon img { filter: brightness(0) !important; } /* Needs form */ .needs-grid { align-items: stretch; } .needs-form { display: flex; flex-direction: column; } .needs-form .study-form { height: 100%; } .study-form { display: grid; gap: 0.6rem; background: #f6f6f4; border: 1px solid var(--border-dark); border-radius: 0; padding: 1.25rem; } .study-form label { color: rgba(14, 14, 14, 0.72); font-size: 0.875rem; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } @media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } } .study-form input { width: 100%; border: 1px solid var(--border-dark); border-radius: 0; padding: 0.55rem 0.85rem; background: #fcfcfc; color: #0e0e0e; font-family: inherit; font-size: 0.9rem; } .study-form input:focus-visible { outline: 2px solid #0e0e0e; outline-offset: 2px; } .consent-label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem !important; line-height: 1.5; } .consent-label input { width: auto; margin-top: 0.2rem; } .study-form button { width: fit-content; } .form-feedback { display: none; border-radius: 0; padding: 0.9rem 1.1rem; font-size: 0.875rem; } .form-feedback:not(:empty) { display: block; margin-bottom: 0.5rem; } .form-feedback.success { background: rgba(46, 160, 67, 0.12); color: #2ea043; border: 1px solid rgba(46, 160, 67, 0.3); } .form-feedback.error { background: rgba(220, 53, 69, 0.1); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.3); } .field-error { display: block; color: #dc3545; font-size: 0.75rem; margin-top: -0.5rem; } .field-error:empty { display: none; } [aria-invalid="true"] { border-color: #dc3545 !important; } /* Contact */ .contact-grid { align-items: center; } .contact-info p { margin: 0.4rem 0; font-size: 1rem; } .contact-info a { text-decoration: none; } .contact-info a:hover { text-decoration: underline; } .social-links { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.25rem; align-items: center; justify-content: center; } .social-links a { display: inline-flex; transition: transform 0.2s ease; } .social-links a svg, .social-links a img { width: 52px; height: 52px; display: block; } .social-links a:hover { transform: translateY(-2px); } .contact-cta { display: flex; justify-content: flex-end; } /* Section contact finale de l'accueil */ .contact-final { text-align: right; } .contact-final h2 { margin: 0.5rem 0 0.75rem; } .contact-final-intro { color: var(--muted-white); margin: 0 0 2rem; } .contact-methods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1.75rem; } .contact-method { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem; border: 1px solid var(--border); border-radius: 999px; color: #fcfcfc; text-decoration: none; font-size: 0.9rem; transition: background 0.2s ease, border-color 0.2s ease; } .contact-method svg { width: 18px; height: 18px; flex-shrink: 0; } .contact-method:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong, rgba(252,252,252,0.3)); } .contact-final-zone { color: var(--muted-white); font-size: 0.9rem; margin: 0 0 2rem; } .contact-final-cta { margin-bottom: 0; } .contact-final-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-bottom: 1.75rem; } .contact-final-social { justify-content: flex-end; margin-top: 0; } /* Footer */ .site-footer { padding: 2rem 0; background: #0b0b0b; } .footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2rem 3rem; padding-bottom: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .footer-social-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; flex: 1 1 460px; max-width: 560px; } .footer-top .footer-social-heading { font-family: 'Nothing You Could Do', cursive; font-size: 1.35rem; color: #fcfcfc; margin: 0; } .footer-social-icons { display: flex; gap: 0.85rem; } .footer-social-icons a { display: inline-flex; } .footer-social-icons img { width: 52px; height: 52px; display: block; transition: transform 0.2s ease; } .footer-social-icons a:hover img { transform: translateY(-2px); } .footer-newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; position: relative; width: 100%; max-width: 100%; } /* Mobile-first : par défaut (sans media query) le champ et le bouton sont empilés en pleine largeur — c'est la mise en page "sûre" qui ne peut pas déborder de l'écran quel que soit le moteur de rendu. La disposition côte-à-côte n'est activée qu'au-delà de 700px via min-width ci-dessous. Avant, la règle par défaut était "nowrap" et un @media (max-width:600px) repassait en colonne : sur Safari mobile, si ce media query ne se déclenchait pas exactement comme prévu, le bouton débordait de l'écran. */ .footer-newsletter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; width: 100%; max-width: 100%; } .footer-newsletter input[type="email"] { height: 50px; border: 1px solid var(--border); border-radius: 999px; padding: 0 1.1rem; background: rgba(255, 255, 255, 0.05); color: #fcfcfc; font-family: inherit; font-size: 0.9rem; min-width: 0; width: 100%; max-width: 100%; flex: 1 1 100%; box-sizing: border-box; } .footer-newsletter input[type="email"]::placeholder { color: rgba(252, 252, 252, 0.45); } .footer-newsletter input[type="email"]:focus-visible { outline: 2px solid #fcfcfc; outline-offset: 2px; } .footer-newsletter button.button { flex: 1 1 100%; width: 100%; max-width: 100%; white-space: nowrap; box-sizing: border-box; } .footer-newsletter button.button:disabled { opacity: 0.6; cursor: default; transform: none; } @media (min-width: 701px) { .footer-newsletter-fields { flex-wrap: nowrap; } .footer-newsletter input[type="email"] { min-width: 200px; width: auto; flex: 1 1 auto; } .footer-newsletter button.button { flex: 0 0 auto; width: auto; } } .footer-newsletter-feedback { flex-basis: 100%; font-size: 0.8rem; } .footer-newsletter-feedback.success { color: #7cd992; } .footer-newsletter-feedback.error { color: #e88a8a; } /* Tant qu'aucun message n'est affiché, ce span vide ne doit pas réserver sa propre ligne (ça créait un grand espace vide sous le formulaire). */ .footer-newsletter-feedback:empty { display: none; } .footer-brand-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; min-width: 220px; } .footer-brand-logo { height: 68px; width: auto; filter: invert(1); margin-bottom: 0.2rem; } .footer-top .footer-brand-tagline { font-family: 'Nothing You Could Do', cursive; font-size: 1.35rem; color: rgba(252, 252, 252, 0.75); margin: 0 0 0.4rem; } .footer-brand-col p { margin: 0; } .footer-brand-col a { color: rgba(252, 252, 252, 0.8); font-size: 0.9rem; text-decoration: none; } .footer-brand-col a:hover { text-decoration: underline; color: #fcfcfc; } @media (max-width: 700px) { .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } /* flex: 1 1 460px était pensé pour la largeur en ligne (desktop) : en colonne (mobile), ce 460px s'appliquait à la hauteur et créait un grand vide sous le formulaire. On repasse à une hauteur naturelle. */ .footer-social-col { align-items: center; max-width: 100%; flex: 0 1 auto; } .footer-brand-col { align-items: center; text-align: center; } .footer-newsletter { justify-content: center; } .footer-newsletter-feedback { text-align: center; } } .footer-inner { align-items: center; gap: 0.75rem 1.5rem; } .footer-credit { grid-column: 1 / span 3; justify-self: start; margin: 0; color: rgba(252, 252, 252, 0.7); font-size: 0.875rem; } .footer-legal { grid-column: 4 / span 3; justify-self: end; } @media (max-width: 700px) { .footer-credit, .footer-legal { grid-column: 1 / -1; justify-self: center; text-align: center; } } .footer-icon { border-radius: 0; } .site-footer p { margin: 0; color: rgba(252, 252, 252, 0.7); font-size: 0.875rem; } .footer-legal { display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; max-width: 100%; } .footer-legal a { font-size: 0.875rem; color: rgba(252, 252, 252, 0.6); text-decoration: none; white-space: nowrap; } .footer-legal a:hover { text-decoration: underline; color: #fcfcfc; } @media (max-width: 1100px) { .footer-legal { gap: 0.6rem; } .footer-legal a { font-size: 0.75rem; } } @media (max-width: 700px) { .footer-legal { gap: 0.5rem; } .footer-legal a { font-size: 0.65rem; } } @media (max-width: 420px) { .footer-legal { gap: 0.35rem; } .footer-legal a { font-size: 0.58rem; } } .booking-link { display: inline-flex; margin-top: 1.5rem; } .needs-illustration { width: 100%; max-width: 420px; height: auto; margin: 0 0 0.75rem; } .needs-section { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; } .needs-handwritten { font-family: 'Nothing You Could Do', cursive; font-size: 1.3rem; color: #0e0e0e; margin: 1rem 0 0; } /* Pages légales */ .legal-content { max-width: none; } .legal-content h2 { font-family: 'DM Serif Display', serif; font-size: 1.375rem; margin: 2rem 0 0.75rem; } .legal-content h2:first-child { margin-top: 0; } .legal-content h2.cgv-title { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border-dark); } .legal-content h3 { font-family: 'tt-commons-pro', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: #0e0e0e; } .legal-content p { color: var(--muted-black); line-height: 1.8; margin: 0 0 1rem; } .legal-content ul { color: var(--muted-black); line-height: 1.8; padding-left: 1.25rem; margin: 0 0 1rem; } .legal-content strong { color: #0e0e0e; } .legal-note { background: #f6f6f4; border: 1px solid var(--border-dark); border-radius: 0; padding: 1rem 1.25rem; font-size: 0.875rem; margin-top: 2rem; } /* Responsive */ @media (max-width: 900px) { .grid-6 { grid-template-columns: 1fr; } .col-span-2, .col-span-3, .col-span-4, .col-span-6, .col-4-6, .col-2-3, .col-3-4, .col-3-6, .col-5-6 { grid-column: auto; } .entry-cards { gap: 1.5rem; } .contact-cta { justify-content: flex-start; margin-top: 1rem; } .work-side { margin-bottom: 1.5rem; } .stat-row { justify-content: center; text-align: center; } .stat { align-items: center; } } @media (max-width: 600px) { /* La taille de .stat-number est maintenant gérée par clamp() (voir règle de base) : plus de palier fixe ici, donc plus de dépendance à un seuil de breakpoint exact qui pourrait ne pas se déclencher pareil sous Safari. */ .stat-label { font-size: 0.72rem; } .stat-row { gap: 0.4rem; } } @media (max-width: 560px) { .study-form { padding: 1.5rem; } .menu-close { right: 1rem; top: 1rem; } .brand-logo { height: 38px; } .header-inner { min-height: 56px; } .contact-methods { flex-direction: column; align-items: stretch; } .contact-method { justify-content: center; } .contact-final { text-align: left; margin-left: 0; } .contact-final-action { justify-content: flex-start; } .contact-final-social { justify-content: flex-start; } } /* Inner pages */ .page-hero { padding: 3.5rem 0 2.5rem; } .page-hero-bg { background-image: linear-gradient(rgba(252, 252, 252, 0.85), rgba(252, 252, 252, 0.85)), url('assets/hero-bg.jpg'); background-size: cover; background-position: center; } .page-title { font-family: 'tt-commons-pro', sans-serif; font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 1.5rem; } .page-intro { max-width: 680px; font-size: 1.125rem; color: var(--muted-black); } .page-intro-full { max-width: none; } .spy-line { font-family: 'DM Serif Display', serif; font-size: 1.3rem; line-height: 1.5; font-weight: 400; } .spy-big { font-weight: 700; } .spy-mid { font-weight: 700; opacity: 0.75; } .section-intro { max-width: 620px; color: var(--muted-black); margin-top: 0; } .section.black .section-intro { color: var(--muted-white); } .sectors-section .container:first-child { margin-bottom: 2rem; } .sector-cards, .value-cards { align-items: stretch; } .section-intro-full { max-width: none; } .sector-icon { display: block; width: 44px; height: 44px; margin-bottom: 1rem; } .sector-card { background: #f6f6f4; border: 1px solid var(--border-dark); border-radius: 0; padding: 1.75rem; height: 100%; } .sector-card h3 { margin-top: 0; font-size: 1.3rem; font-family: 'DM Serif Display', serif; font-weight: 700; text-transform: none; letter-spacing: 0; } .sector-card p { margin-bottom: 0; color: var(--muted-black); } .values-section .container:first-child { margin-bottom: 2rem; } .value-card { background: #161616; border: 1px solid var(--border); border-radius: 0; padding: 1.75rem; height: 100%; } .value-card h3 { font-family: 'DM Serif Display', serif; margin-top: 0; font-size: 1.25rem; } .value-card p { margin-bottom: 0; color: var(--muted-white); } .method-teaser-section h2 { margin-top: 0; } .method-teaser-grid p { max-width: none; color: var(--muted-black); margin: 1rem 0 1.75rem; } .contact-teaser-section.black .contact-info p { color: var(--muted-white); margin-top: 0.5rem; } .contact-teaser-section.white .contact-info p { color: var(--muted-black); margin-top: 0.5rem; } .contact-teaser-section .contact-cta { display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 900px) { .sector-card, .value-card { margin-bottom: 0; } .contact-teaser-section .contact-cta { justify-content: flex-start; margin-top: 1rem; } } /* Méthode */ .process-section .container:first-child { margin-bottom: 2rem; } .process-steps { align-items: stretch; row-gap: 0.75rem; } .step-card { background: #fcfcfc; border-radius: 0; padding: 1rem; height: 100%; } .step-header { display: flex; align-items: baseline; gap: 0.75rem; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 2px solid #0e0e0e; } .step-number { font-family: 'DM Serif Display', serif; font-size: 2.5rem; color: rgba(14, 14, 14, 0.35); } .step-header h3 { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.1; } .step-card p { margin: 0; color: var(--muted-black); } .formula-section .container:first-child { margin-bottom: 2rem; } .flexibility-section .container:first-child { margin-bottom: 2.5rem; } .formula-cards, .flexibility-cards { align-items: stretch; } .flexibility-cards .formula-card { background: #0e0e0e; border-color: #fcfcfc; transition: background 0.2s ease, color 0.2s ease; } .flexibility-cards .formula-card h3, .flexibility-cards .formula-card p { color: #fcfcfc !important; transition: color 0.2s ease; } .flexibility-cards .formula-card:hover { background: #fcfcfc; } .flexibility-cards .formula-card:hover h3, .flexibility-cards .formula-card:hover p { color: #0e0e0e !important; } .formula-card { background: #fcfcfc; border: 1px solid var(--border-dark); border-radius: 0; padding: 1.75rem; height: 100%; position: relative; } .formula-card h3, .formula-card p { color: #0e0e0e !important; } .formula-card.featured { background: #fcfcfc; border-color: var(--border-dark); } .formula-card.featured h3, .formula-card.featured p { color: #0e0e0e !important; } .formula-card h3 { margin-top: 0; font-size: 1.3rem; font-family: 'DM Serif Display', serif; font-weight: 700; text-transform: none; letter-spacing: 0; } .formula-card p { margin-bottom: 0; color: var(--muted-white); } .duration-section .container > h2 { margin-bottom: 0.5rem; } .duration-table { margin-top: 2rem; border-top: 1px solid var(--border-dark); } .duration-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-dark); } .duration-row span:first-child { font-weight: 700; } .duration-row span:last-child { color: var(--muted-black); text-align: right; } .section.black .duration-row span:last-child { color: var(--muted-white); } .section.black .duration-row { border-color: var(--border); } .section.black .duration-table { border-top-color: var(--border); } @media (max-width: 560px) { .duration-row { flex-direction: column; gap: 0.25rem; } .duration-row span:last-child { text-align: left; } } /* Offres */ .doors-section, .offers-section { min-height: calc(100vh - clamp(140px, 12vw, 220px)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0; } .services-list-section { padding-bottom: 0; } .services-list-bare { position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 80px; background-image: radial-gradient(circle, rgba(14, 14, 14, 0.2) 1px, transparent 1.2px); background-size: 16px 16px; } .services-brush-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .services-list-bare > .container { position: relative; z-index: 1; } .services-list-section .services-list-title { font-family: 'tt-commons-pro', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.75rem; margin: 0 0 13px; } .services-list-subtitle { font-family: 'Nothing You Could Do', cursive; font-size: 1.25rem; color: var(--muted-black); margin: 0 0 0.5rem; } .services-list { display: grid; gap: 1px; background: var(--border-dark); border-radius: 0; overflow: hidden; } .services-zigzag { display: flex; flex-direction: column; gap: 1.25rem; } .service-row-title { grid-column: 1 / span 2; align-self: start; margin: 0; } .services-list-title-above { margin-bottom: 1rem; } .service-row { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 1.5rem; align-items: stretch; } .service-row-visual { grid-column: 1 / span 3; position: relative; border-radius: 0; overflow: hidden; background-color: #f6f6f4; height: clamp(220px, 24vw, 340px); display: flex; align-items: center; justify-content: center; } .service-row-visual img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.25s ease; } .service-row-visual details.service-details { position: absolute; inset: 0; pointer-events: none; } .service-row-visual details.service-details summary { position: absolute; bottom: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 999px; background: #0e0e0e; color: #fcfcfc; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; list-style: none; pointer-events: auto; } .service-row-visual details.service-details summary::-webkit-details-marker { display: none; } .service-row-visual details.service-details summary::after { content: '+'; } .service-row-text { grid-column: 4 / span 3; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: 0; } .service-row-1 .service-row-visual { grid-column: 3 / span 2; } .service-row-1 .service-row-text { grid-column: 5 / span 2; } .service-row-2 .service-row-visual { grid-column: 1 / span 2; } .service-row-2 .service-row-text { grid-column: 3 / span 2; } .service-row-3 .service-row-visual { grid-column: 3 / span 2; } .service-row-3 .service-row-text { grid-column: 1 / span 2; } .service-row-4 .service-row-visual { grid-column: 5 / span 2; } .service-row-4 .service-row-text { grid-column: 3 / span 2; } .service-row-3 .service-row-text, .service-row-4 .service-row-text { align-items: flex-end; text-align: right; } .service-row-3 .service-tags, .service-row-4 .service-tags { justify-content: flex-end; } .service-row-3 .service-row-text p, .service-row-4 .service-row-text p { margin-left: auto; } .service-row-text h3 { margin: 0 0 0.5rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; text-transform: none; font-family: 'DM Serif Display', serif; font-weight: 400; overflow-wrap: break-word; } .service-row-text p { margin: 0; color: var(--muted-black); font-size: 0.95rem; max-width: 380px; } .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } .service-tags span { font-size: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-dark); background: #0e0e0e; color: #fcfcfc; white-space: nowrap; } .service-tags-stacked { flex-direction: column; align-items: flex-start; } @media (max-width: 700px) { .service-row, .service-row-1, .service-row-2, .service-row-3, .service-row-4 { grid-template-columns: 1fr; } .service-row-visual, .service-row-text, .service-row-title { grid-column: 1 / -1 !important; text-align: left; } .service-row-title { order: 0 !important; margin-bottom: 1rem !important; } .service-row-visual { order: 1 !important; } .service-row-text { order: 2 !important; } .service-row-3 .service-row-text, .service-row-4 .service-row-text { align-items: flex-start !important; text-align: left !important; } .service-row-3 .service-tags, .service-row-4 .service-tags { justify-content: flex-start !important; } .service-row-3 .service-row-text p, .service-row-4 .service-row-text p { margin-left: 0 !important; } .service-row-text { padding: 0.75rem 0 0; margin-top: 0 !important; } } .immersion-callout-section { padding: 3rem 0; } .immersion-callout-section p { color: var(--muted-black); margin: 1rem 0 1.25rem; } .detail-section .container:first-child { margin-bottom: 2rem; } .prestation-list { display: grid; gap: 1px; background: var(--border); border-radius: 0; overflow: hidden; padding-left: 0; padding-right: 0; } .prestation-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.5rem; background: #161616; padding: 1.5rem; } .section.white .prestation-row { background: #fcfcfc; } .prestation-info h3 { margin: 0 0 0.4rem; font-size: 1rem; } .prestation-info p { margin: 0; color: var(--muted-white); } .section.white .prestation-info p { color: var(--muted-black); } .prestation-price { font-weight: 700; white-space: nowrap; } .faq-list { display: grid; gap: 1px; background: var(--border); border-radius: 0; overflow: hidden; margin-top: 1.5rem; padding-left: 0; padding-right: 0; } .faq-item { background: #161616; padding: 1.25rem 1.5rem; } .faq-item summary { cursor: pointer; font-weight: 700; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; float: right; font-weight: 400; } .faq-item[open] summary::after { content: '−'; } .faq-item p { margin: 1rem 0 0; color: var(--muted-white); } @media (max-width: 700px) { .prestation-row { grid-template-columns: 1fr; text-align: left; } .prestation-row .button { justify-self: start; } } /* Contact */ .contact-main-section { padding-top: 3rem; } .contact-main-grid { align-items: start; } .contact-form-col .study-form { background: #161616; border-color: var(--border); } .contact-form-col .study-form label { color: rgba(252, 252, 252, 0.72); } .contact-form-col .study-form input, .contact-form-col .study-form select, .contact-form-col .study-form textarea { background: rgba(255, 255, 255, 0.05); border-color: var(--border); color: #fcfcfc; } .contact-form-col .study-form textarea { resize: vertical; font-family: inherit; font-size: 1rem; } /* Les menus déroulants natifs ignorent le fond semi-transparent du champ : on force un fond clair et un texte foncé sur les options pour rester lisible. */ .contact-form-col .study-form select option { background: #fcfcfc; color: #0e0e0e; } .contact-side-block { background: #161616; border: 1px solid var(--border); border-radius: 0; padding: 1.75rem; } .contact-side-block h3 { margin-top: 0; } .contact-side-block p { margin: 0.4rem 0; } .social-follow { margin-top: 1.25rem !important; font-family: 'Nothing You Could Do', cursive; font-size: 1.35rem; color: var(--muted-white); } .contact-side-block a { text-decoration: none; } .contact-side-block a:hover { text-decoration: underline; } .testimonials-section { padding-top: 3.5rem; padding-bottom: 3.5rem; } .testimonials-carousel { position: relative; text-align: center; } .testimonials-track { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; } .testimonial-slide { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; margin: 0; padding: 0 1.5rem; } .testimonial-slide.is-active { opacity: 1; pointer-events: auto; position: relative; } .testimonial-quote { font-family: 'Nothing You Could Do', cursive; font-size: clamp(1.6rem, 3.4vw, 2.85rem); line-height: 1.3; color: #fcfcfc; max-width: 920px; margin: 0; } .testimonial-author { display: block; font-style: normal; font-family: 'tt-commons-pro', sans-serif; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(252, 252, 252, 0.6); } .testimonials-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; } .testimonial-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(252, 252, 252, 0.25); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .testimonial-dot:hover { background: rgba(252, 252, 252, 0.5); } .testimonial-dot.is-active { background: #fcfcfc; transform: scale(1.3); } .booking-section { padding-top: 3.5rem; } .booking-section h2 { margin-bottom: 0.5rem; } .calendly-embed { margin-top: 2rem; border: 1px solid var(--border-dark); border-radius: 0; overflow: hidden; } .calendly-embed iframe { display: block; } .calendly-fallback { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-black); } @media (max-width: 900px) { .contact-main-grid { gap: 2rem; } } /* Réalisations */ .filter-section { padding-top: 2.5rem; } .filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; } .filter-btn { border: 1px solid var(--border); background: transparent; color: #fcfcfc; padding: 0.55rem 1.1rem; border-radius: 999px; font-family: 'DM Serif Display', serif; font-size: 1rem; letter-spacing: 0.01em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .filter-btn:hover { background: rgba(255, 255, 255, 0.08); } .filter-btn.active { background: #fcfcfc; color: #0e0e0e; border-color: #fcfcfc; } .filter-bar-category { margin-bottom: 2.5rem; margin-top: -1rem; } .filter-btn-alt { font-family: 'tt-commons-pro', sans-serif; font-size: 0.8rem; padding: 0.4rem 0.9rem; border-color: rgba(252, 252, 252, 0.2); color: rgba(252, 252, 252, 0.7); } .filter-btn-alt.active { background: rgba(252, 252, 252, 0.15); color: #fcfcfc; border-color: rgba(252, 252, 252, 0.4); } .section.white .filter-btn { color: #0e0e0e; border-color: var(--border-dark); } .section.white .filter-btn.active { background: #0e0e0e; color: #fcfcfc; border-color: #0e0e0e; } .section.white .filter-btn-alt { color: rgba(14, 14, 14, 0.65); border-color: rgba(14, 14, 14, 0.2); } .section.white .filter-btn-alt.active { background: rgba(14, 14, 14, 0.08); color: #0e0e0e; border-color: rgba(14, 14, 14, 0.4); } /* Grille masonry style Pinterest */ .masonry-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; grid-auto-rows: 8px; gap: 1rem; } @media (max-width: 700px) { .masonry-grid { grid-template-columns: repeat(2, 1fr); } } .masonry-wide { grid-column: span 3; } @media (max-width: 700px) { .masonry-wide { grid-column: span 2; } } .masonry-item { display: block; width: 100%; grid-column: span 2; position: relative; border-radius: 0; overflow: hidden; border: none; padding: 0; cursor: pointer; background: #fcfcfc; font: inherit; color: inherit; text-align: left; } .masonry-item.is-hidden { display: none; } .masonry-item img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fcfcfc; } .masonry-logo { background: #f6f6f4; display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 2rem; } .masonry-logo img { width: auto; max-width: 100%; max-height: 90px; object-fit: contain; } .masonry-placeholder { min-height: 220px; display: flex; align-items: flex-end; color: rgba(252, 252, 252, 0.4); font-size: 0.8rem; padding: 1rem; } .placeholder-a { min-height: 300px; } .placeholder-b { min-height: 240px; } .placeholder-c { min-height: 340px; } .placeholder-d { min-height: 200px; } .masonry-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem; padding: 1.25rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 65%); color: #fcfcfc; opacity: 0; transition: opacity 0.25s ease; } .masonry-overlay-title { font-family: 'DM Serif Display', serif; font-size: 1.05rem; line-height: 1.3; } .masonry-overlay-tags { font-family: 'tt-commons-pro', sans-serif; font-size: 0.7rem; letter-spacing: 0.02em; color: rgba(252, 252, 252, 0.8); } .masonry-item:hover .masonry-overlay, .masonry-item:focus-visible .masonry-overlay { opacity: 1; } .masonry-logo .masonry-overlay { color: #fcfcfc; } /* Fenêtre modale de l'étude de cas */ .case-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .case-modal[hidden] { display: none; } .case-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 14, 14, 0.75); } .case-modal-panel { position: relative; background: #fcfcfc; border-radius: 0; max-width: 1300px; width: 95vw; max-height: 92vh; display: flex; flex-direction: column; padding: 3rem; } .case-modal-close { position: absolute; top: 1rem; right: 1.25rem; z-index: 2; background: #fcfcfc; border: none; border-radius: 999px; width: 40px; height: 40px; font-size: 1.75rem; line-height: 1; cursor: pointer; color: #0e0e0e; } .case-modal-body .case-tag { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: rgba(14, 14, 14, 0.55); } .case-modal-body .case-details-title { display: block; font-family: 'DM Serif Display', serif; font-size: 2rem; line-height: 1.15; margin: 0.4rem 0 1.25rem; color: #0e0e0e; } .case-modal-body .case-place { display: block; font-size: 0.9rem; color: rgba(14, 14, 14, 0.55); margin-bottom: 1rem; } .case-modal-body .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; } .case-modal-body .service-tags span { font-size: 0.72rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid #0e0e0e; background: #0e0e0e; color: #fcfcfc; white-space: nowrap; } .case-modal-body .case-p { display: block; margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: #f6f6f4; border-left: 3px solid #0e0e0e; color: #0e0e0e; font-size: 0.95rem; line-height: 1.6; } .case-modal-body .case-p strong { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; margin-bottom: 0.4rem; color: rgba(14, 14, 14, 0.55); font-weight: 700; } .case-modal-body .case-list { display: block; margin: 0; } .case-modal-body .case-list span { display: block; position: relative; padding-left: 1.5rem; margin-bottom: 1.1rem; color: #0e0e0e; font-size: 0.95rem; line-height: 1.55; } .case-modal-body .case-list span:last-child { margin-bottom: 0; } .case-modal-body .case-list span::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 999px; background: #0e0e0e; } .case-modal-body .case-list span strong { font-weight: 700; } .case-modal-body .case-result { display: block; font-weight: 700; margin: 0.75rem 0 0; color: #0e0e0e; } .case-modal-body .case-service-link { display: inline-block; margin-top: 1rem; color: #0e0e0e; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .case-modal-body .case-service-link:hover { opacity: 0.7; } .case-modal-body .case-quote { display: block; font-family: 'Nothing You Could Do', cursive; font-size: 1.4rem; margin-top: 1.25rem; color: #0e0e0e; } .case-modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 1.5rem; padding-bottom: 0.5rem; } .case-modal-gallery-block { width: 100%; margin: 1.25rem 0 1.75rem; } .case-modal-gallery-block-second { margin-top: 0; margin-bottom: 1.75rem; } .case-modal-text-block { width: 100%; } .case-modal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; height: 460px; } .case-modal-grid-slot { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; min-width: 0; } .case-modal-grid-slot img { display: block; width: 100%; flex: 1 1 0; min-height: 0; object-fit: contain; background: #fcfcfc; cursor: pointer; } @media (max-width: 700px) { .case-modal-grid { grid-template-columns: repeat(6, 1fr); height: auto; } .case-modal-grid-slot { grid-column: 1 / -1 !important; flex-direction: row; height: auto; } .case-modal-grid-slot img { height: 220px; flex: 1 1 0; } /* Marges réduites pour profiter au maximum de la largeur de l'écran sur mobile */ .case-modal { padding: 0.5rem; } .case-modal-panel { width: 100%; max-height: 95vh; padding: 1.5rem 1.25rem; } .case-modal-close { top: 0.5rem; right: 0.5rem; } } .case-modal-cta { margin-top: 1.5rem; margin-bottom: 0.5rem; flex-shrink: 0; } .mini-gallery-section .container:first-child { margin-bottom: 2rem; } .mini-gallery { align-items: stretch; } .mini-card { display: flex; flex-direction: column; gap: 0.5rem; } .mini-image { min-height: 200px; } .mini-image-logo { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #f6f6f4; } .mini-image-logo img { max-width: 100%; max-height: 100px; width: auto; height: auto; object-fit: contain; } .mini-card h3 { margin: 0.5rem 0 0; font-size: 1rem; } .mini-card p { margin: 0; color: var(--muted-black); font-size: 0.875rem; } @media (max-width: 900px) { .case-card { grid-template-columns: 1fr; } .case-image { min-height: 220px; } } /* Bandeau de consentement cookies */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #0e0e0e; border-top: 1px solid var(--border); padding: 1.25rem clamp(1.25rem, 6vw, 100px); } .cookie-banner-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; } .cookie-banner p { margin: 0; max-width: 720px; font-size: 0.875rem; line-height: 1.6; color: var(--muted-white); } .cookie-banner p a { color: #fcfcfc; text-decoration: underline; } .cookie-banner-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-banner .button.outline { color: #fcfcfc; border-color: rgba(252, 252, 252, 0.4); background: transparent; } .cookie-banner .button.outline:hover { background: #fcfcfc; color: #0e0e0e; border-color: #fcfcfc; } @media (max-width: 560px) { .cookie-banner-inner { flex-direction: column; align-items: stretch; } .cookie-banner-actions { justify-content: flex-end; } } /* Bouton retour en haut de page */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 900; width: 48px; height: 48px; border-radius: 999px; border: none; background: #0e0e0e; color: #fcfcfc; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #2a2a2a; } body:has(.cookie-banner) .back-to-top { bottom: 6.5rem; } @media (max-width: 700px) { .back-to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; font-size: 1rem; } body:has(.cookie-banner) .back-to-top { bottom: 9rem; } } /* Widget flottant Calendly : repositionné à gauche pour laisser la place au bouton "retour en haut" à droite. Calendly applique sa position par défaut (bas droite) en style inline non "!important" : ces règles passent donc devant. */ #calendly-badge-widget, .calendly-badge-widget { left: 1.5rem !important; right: auto !important; } @media (max-width: 700px) { #calendly-badge-widget, .calendly-badge-widget { left: 1rem !important; bottom: 1rem !important; } }