/* ===================================================================== simonlacroix.net — POP ART --------------------------------------------------------------------- Le principe : la page entière prend un FOND UNI VIBRANT, décidé par le tag principal du contenu et injecté en variables CSS sur par le PHP (palette_css_vars). Ce fichier ne connaît donc AUCUNE couleur d'univers : il ne parle qu'en --pop-*. Changer la couleur d'un tag en admin repeint la page sans toucher à une ligne de CSS. Vocabulaire pop art assumé : aplats francs, contours noirs épais, ombres dures décalées (jamais de flou), typo lourde, un accent qui claque. ===================================================================== */ :root { /* Thème NEUTRE (accueil, recherche). Écrasé en ligne dès qu'une page a un univers. Les valeurs ici DOIVENT rester synchronisées avec POP_NEUTRAL dans backend/src/palette.php. */ --pop-bg: #F5F1EA; --pop-ink: #141414; --pop-accent: #E63946; --pop-on-accent: #FFF8F0; --pop-surface: #FFFFFF; --pop-border: #141414; --pop-muted: #5A5A5A; --edge: 3px; /* épaisseur du trait pop art */ --shadow: 6px 6px 0 var(--pop-border); --shadow-sm: 4px 4px 0 var(--pop-border); --radius: 18px; --gap: clamp(14px, 2.2vw, 26px); --page: min(1400px, 94vw); --font-display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--pop-bg); color: var(--pop-ink); /* La transition rend le changement d'univers perceptible sans être lente. */ transition: background-color .25s ease; } body { margin: 0; font-family: var(--font-body); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.6; background: var(--pop-bg); color: var(--pop-ink); /* Le mur peut faire déborder une carte d'un pixel ; on coupe sans créer de conteneur de défilement interne (clip, pas hidden). */ overflow-x: clip; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .4em; } h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); } h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); } p { margin: 0 0 1em; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } .visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skipLink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--pop-accent); color: var(--pop-on-accent); padding: 12px 18px; font-weight: 700; } .skipLink:focus { left: 8px; top: 8px; } :focus-visible { outline: 3px solid var(--pop-accent); outline-offset: 3px; } /* Le pot de miel doit être invisible pour l'humain mais rempli par un robot : `display:none` suffit ici, les robots à formulaire ne lisent pas le CSS. */ .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ---------------------------------------------------------------- Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-size: 1rem; text-decoration: none; cursor: pointer; padding: .85em 1.5em; border: var(--edge) solid var(--pop-border); border-radius: 999px; background: var(--pop-surface); color: var(--pop-ink); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop-border); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pop-border); } .btn--primary { background: var(--pop-accent); color: var(--pop-on-accent); } .btn--ghost { background: transparent; } .btn--big { font-size: clamp(1rem, 1.5vw, 1.25rem); padding: 1em 1.9em; } .btn--social { width: 100%; justify-content: center; margin-bottom: 8px; background: var(--pop-surface); } .flash { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; } .flash--ok { background: #C8F7DC; color: #062B22; } .flash--err { background: #FFD9DE; color: #4A0B14; } .flash--info { background: #FFF0C2; color: #3A2A00; } .empty { color: var(--pop-muted); padding: 40px 0; text-align: center; } .muted { color: var(--pop-muted); font-size: .9em; } .kicker { display: inline-block; font-family: var(--font-display); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; background: var(--pop-accent); color: var(--pop-on-accent); padding: .35em .8em; border-radius: 999px; margin: 0 0 12px; } /* --------------------------------------------------------------- En-tête */ .siteHeader { padding: 18px 0 0; } .siteHeader__bar { width: var(--page); margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; } .brand__mark { width: 40px; height: 40px; border-radius: 50%; background: var(--pop-accent); border: var(--edge) solid var(--pop-border); flex: none; } .brand__text strong { display: block; font-family: var(--font-display); font-size: 1.15rem; } .brand__text small { display: block; font-size: .78rem; color: var(--pop-muted); } .searchBox { position: relative; display: flex; gap: 0; flex: 1 1 260px; max-width: 460px; } .searchBox input { flex: 1; min-width: 0; font: inherit; padding: .7em 1em; border: var(--edge) solid var(--pop-border); border-right: 0; border-radius: 999px 0 0 999px; background: var(--pop-surface); color: var(--pop-ink); } .searchBox button { font-family: var(--font-display); cursor: pointer; padding: .7em 1.2em; border: var(--edge) solid var(--pop-border); border-radius: 0 999px 999px 0; background: var(--pop-accent); color: var(--pop-on-accent); } .searchBox__suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: var(--pop-surface); border: var(--edge) solid var(--pop-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .searchBox__suggest a { display: block; padding: 10px 14px; text-decoration: none; } .searchBox__suggest a:hover, .searchBox__suggest a.is-active { background: var(--pop-accent); color: var(--pop-on-accent); } .searchBox__suggest small { display: block; opacity: .7; font-size: .8em; } .searchBox--page { max-width: 640px; margin: 18px 0 0; } .navToggle { display: none; } .siteNav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .siteNav > a { text-decoration: none; padding: .5em .8em; border-radius: 999px; font-weight: 600; } .siteNav > a:hover { background: var(--pop-accent); color: var(--pop-on-accent); } .langPicker { display: inline-flex; gap: 2px; margin: 0 4px; } .langPicker a { text-decoration: none; font-size: .8rem; padding: .35em .6em; border-radius: 999px; font-weight: 700; } .langPicker a.is-current { background: var(--pop-ink); color: var(--pop-bg); } /* Rail de tags : défile horizontalement sur mobile, sans scroll de page. */ .tagRail { width: var(--page); margin: 18px auto 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .tagRail--inline { margin: 0 auto 24px; } .tagChip { --chip-bg: var(--pop-surface); --chip-ink: var(--pop-ink); flex: none; text-decoration: none; font-weight: 700; font-size: .9rem; padding: .5em 1em; border-radius: 999px; border: var(--edge) solid var(--pop-border); background: var(--chip-bg); color: var(--chip-ink); } .tagChip:hover { box-shadow: var(--shadow-sm); } .tagChips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; } .crumbs { width: var(--page); margin: 20px auto 0; font-size: .85rem; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; } .crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .5; } /* ----------------------------------------------------------------- Layout */ .pageMain { width: var(--page); margin: 0 auto; padding: 28px 0 60px; } /* L'accueil n'a ni fil d'Ariane ni chapeau : la grille doit commencer haut. */ .page-home .pageMain { padding-top: 14px; } .section { margin: 56px 0; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .section__title { margin: 0 0 20px; } .section__more { font-weight: 700; } .pageHead { margin: 0 0 32px; max-width: 62ch; } .pageHead__lead { font-size: 1.15rem; color: var(--pop-muted); } /* ------------------------------------------------------------------- Hero */ .hero { border: var(--edge) solid var(--pop-border); border-radius: calc(var(--radius) * 1.6); background: var(--pop-surface); box-shadow: var(--shadow); padding: clamp(28px, 5vw, 64px); margin: 12px 0 40px; max-width: 74ch; } .hero__title { margin-bottom: .3em; } .hero__lead { font-size: 1.2rem; max-width: 52ch; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; } .hero__reassure, .croBand__reassure, .quoteHead__reassure { list-style: none; padding: 0; margin: 24px 0 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; } .hero__reassure li::before, .croBand__reassure li::before, .quoteHead__reassure li::before { content: "✔"; color: var(--pop-accent); margin-right: .4em; font-weight: 900; } /* -------------------------------------------------------------- LE MUR --- Maçonnerie en colonnes CSS : chaque carte garde le ratio réel de sa photo. Une maçonnerie JS ferait sauter la page au chargement, et un ratio imposé recadrerait les photos — inacceptable sur un portfolio. */ .wall { column-count: 5; column-gap: var(--gap); } @media (max-width: 1500px) { .wall { column-count: 4; } } @media (max-width: 1100px) { .wall { column-count: 3; } } @media (max-width: 700px) { .wall { column-count: 2; } } /* Deux colonnes tenues jusqu'en bas : une colonne unique sur mobile donne un fil d'actualité, pas un mur. Pinterest ne descend jamais à une colonne. */ @media (max-width: 420px) { .wall { column-gap: 10px; } } .pin, .wall__ad { break-inside: avoid; margin: 0 0 var(--gap); /* `inline-block` évite un bug de rupture de colonne sur WebKit. */ display: inline-block; width: 100%; } .pin { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .pin:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pop-border); } .pin__link { text-decoration: none; display: block; color: inherit; } .pin__media { position: relative; background: var(--pop-surface); } .pin__img { width: 100%; height: auto; } .pin__placeholder { aspect-ratio: 4 / 3; background: var(--pop-accent); } .pin__count, .pin__private { position: absolute; top: 10px; right: 10px; background: var(--pop-ink); color: var(--pop-bg); font-size: .72rem; font-weight: 700; padding: .3em .7em; border-radius: 999px; } .pin__private { left: 10px; right: auto; background: var(--pop-accent); color: var(--pop-on-accent); } .pin__body { padding: 14px 16px 4px; } .pin__title { font-size: 1.05rem; margin: 0 0 .2em; } .pin__meta { font-size: .82rem; color: var(--pop-muted); margin: 0; } .pin__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; margin: 8px 0 0; } .pin__tags a { font-size: .75rem; text-decoration: none; opacity: .75; } .pin__tags a:hover { opacity: 1; text-decoration: underline; } /* -------------------------------------------------------- Grille de tags */ .tagGrid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .tagCard a { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 150px; padding: 22px; text-decoration: none; border-radius: var(--radius); border: var(--edge) solid var(--pop-border); box-shadow: var(--shadow-sm); background: var(--card-bg); color: var(--card-ink); transition: transform .15s ease, box-shadow .15s ease; } .tagCard a:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pop-border); } .tagCard__name { font-family: var(--font-display); font-size: 1.4rem; } .tagCard__tagline { font-size: .88rem; opacity: .85; } .tagCard__count { margin-top: auto; font-size: .78rem; font-weight: 700; opacity: .8; } /* --------------------------------------------------- Page d'univers (tag) */ .tagHead { max-width: 68ch; margin: 0 0 32px; } .tagHead__tagline { font-size: 1.25rem; } .tagHead__count { font-weight: 700; opacity: .75; } .tagHead--pair .tagHead__title a { text-decoration: none; border-bottom: var(--edge) solid var(--pop-accent); } .pairLinks { margin: 56px 0; } .pairLinks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .pairLinks a { display: block; padding: 12px 16px; text-decoration: none; font-weight: 700; border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); } .pairLinks a:hover { background: var(--pop-accent); color: var(--pop-on-accent); } .pairLinks small { display: block; font-weight: 400; opacity: .7; font-size: .78rem; } /* ----------------------------------------------- Fiche réalisation */ .postView { max-width: 1100px; } .postView__head { max-width: 62ch; margin: 0 0 32px; } .postView__subtitle { font-size: 1.2rem; opacity: .85; } .postView__facts, .projectView__facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 26px; } .postView__facts li { display: flex; flex-direction: column; } .postView__facts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; } .postView__facts strong { font-family: var(--font-display); font-size: 1.15rem; } .postView__date { font-size: .85rem; opacity: .7; margin-top: 32px; } .postView__tags { margin: 40px 0 0; } .gallery { display: grid; gap: var(--gap); margin: 0 0 40px; } .gallery__item { margin: 0; } .gallery__img { width: 100%; border: var(--edge) solid var(--pop-border); border-radius: var(--radius); box-shadow: var(--shadow); } .gallery__caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; padding: 10px 4px 0; opacity: .9; } .pinBtn { font-weight: 700; font-size: .8rem; text-decoration: none; padding: .45em 1em; border-radius: 999px; border: 2px solid var(--pop-border); background: #E60023; color: #fff; } /* ------------------------------------------------------------- Contenu */ .prose { max-width: 68ch; } .prose h2 { margin-top: 1.6em; } .prose h3 { margin-top: 1.4em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin-bottom: .4em; } .prose img { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); margin: 1.5em 0; } .prose blockquote { margin: 1.5em 0; padding: 12px 20px; border-left: 6px solid var(--pop-accent); background: var(--pop-surface); border-radius: 0 var(--radius) var(--radius) 0; } .prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; } .faq__item { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); padding: 14px 20px; margin-bottom: 12px; } .faq__item summary { font-family: var(--font-display); cursor: pointer; } .toc { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); padding: 18px 24px; margin: 0 0 32px; max-width: 46ch; } .toc h2 { font-size: 1rem; margin: 0 0 .6em; } .toc ol { margin: 0; padding-left: 1.2em; font-size: .92rem; } .toc__l3 { margin-left: 1em; opacity: .8; } /* ------------------------------------------------- Journal & projets */ .articleList { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .articleCard { --card-bg: var(--pop-surface); --card-ink: var(--pop-ink); border: var(--edge) solid var(--pop-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card-bg); color: var(--card-ink); } .articleCard a { text-decoration: none; color: inherit; display: block; height: 100%; } .articleCard:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pop-border); } .articleCard__body { padding: 18px 20px; } .articleCard__tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .7; } .articleCard h2, .articleCard h3 { font-size: 1.2rem; margin: .3em 0; } .articleCard p { font-size: .9rem; opacity: .85; } .articleView__cover { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 32px; } .articleView__meta { font-size: .85rem; opacity: .75; } .projectStrip { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .projectStrip a { display: block; padding: 22px; text-decoration: none; border-radius: var(--radius); border: var(--edge) solid var(--pop-border); box-shadow: var(--shadow-sm); background: var(--project-accent, var(--pop-accent)); color: #fff; } .projectStrip strong { display: block; font-family: var(--font-display); font-size: 1.3rem; } .projectStrip span { font-size: .9rem; opacity: .9; } .projectList { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); } .projectCard { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); overflow: hidden; background: var(--pop-surface); box-shadow: var(--shadow-sm); border-left: 12px solid var(--card-accent); } .projectCard__body { padding: 24px; } .projectCard__facts, .projectView__facts { list-style: none; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; } .projectCard__facts li, .projectView__facts li { display: flex; flex-direction: column; } .projectCard__facts strong, .projectView__facts strong { font-family: var(--font-display); font-size: 1.3rem; } .projectCard__facts span, .projectView__facts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; } .projectView__cover { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); margin: 32px 0; } /* -------------------------------------------------------- Conversion */ .croBand { border: var(--edge) solid var(--pop-border); border-radius: calc(var(--radius) * 1.6); background: var(--pop-accent); color: var(--pop-on-accent); box-shadow: var(--shadow); padding: clamp(28px, 4vw, 56px); margin: 64px 0; } .croBand__inner { max-width: 56ch; } .croBand__title { margin-bottom: .3em; } .croBand__lead { font-size: 1.1rem; margin-bottom: 24px; } .croBand .btn--primary { background: var(--pop-on-accent); color: var(--pop-accent); } .quoteHead { max-width: 64ch; margin: 0 0 40px; } .planPicker__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .planCard { display: block; cursor: pointer; } .planCard input { position: absolute; opacity: 0; width: 0; height: 0; } .planCard__inner { display: flex; flex-direction: column; gap: 8px; height: 100%; position: relative; padding: 26px 24px; border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .planCard input:checked + .planCard__inner { background: var(--pop-accent); color: var(--pop-on-accent); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pop-border); } .planCard input:focus-visible + .planCard__inner { outline: 3px solid var(--pop-ink); outline-offset: 3px; } .planCard--featured .planCard__inner { border-width: 5px; } .planCard__badge { position: absolute; top: -14px; right: 16px; background: var(--pop-ink); color: var(--pop-bg); font-size: .7rem; font-weight: 700; padding: .3em .8em; border-radius: 999px; } .planCard__name { font-family: var(--font-display); font-size: 1.4rem; } .planCard__price { font-family: var(--font-display); font-size: 2rem; } .planCard__delay { font-size: .8rem; opacity: .8; } .planCard__includes { list-style: none; padding: 0; margin: 8px 0 0; font-size: .9rem; } .planCard__includes li::before { content: "✔"; margin-right: .5em; } .briefForm { margin: 56px 0 0; } .briefForm__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .field { margin: 0; display: flex; flex-direction: column; gap: 6px; } .field--full { grid-column: 1 / -1; } .field label { font-weight: 700; font-size: .88rem; } .field input, .field textarea, .chatIdentifyForm input, .chatPanel__form textarea, .chatThread__form textarea { font: inherit; padding: .75em 1em; background: var(--pop-surface); color: var(--pop-ink); border: var(--edge) solid var(--pop-border); border-radius: 14px; } .objections { list-style: none; padding: 0; margin: 32px 0; font-size: .92rem; display: grid; gap: 10px; } .objections li { padding-left: 1.6em; position: relative; } .objections li::before { content: "→"; position: absolute; left: 0; color: var(--pop-accent); font-weight: 900; } .quoteForm__submit { margin: 24px 0 0; } .quoteForm__error { color: #B00020; font-weight: 700; } .contactForm { max-width: 620px; display: grid; gap: 18px; } .socialRow { max-width: 620px; margin: 0 0 28px; } .thanks, .errorPage { max-width: 56ch; padding: 40px 0; } /* -------------------------------------------------------------- Tchat */ .chatLauncher { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-display); font-size: 1rem; padding: .9em 1.5em; background: var(--pop-accent); color: var(--pop-on-accent); border: var(--edge) solid var(--pop-border); border-radius: 999px; box-shadow: var(--shadow); } .chatLauncher__dot { width: 10px; height: 10px; border-radius: 50%; background: #35E08B; } .chatLauncher.is-open { display: none; } .chatPanel { position: fixed; right: 18px; bottom: 18px; z-index: 61; width: min(400px, calc(100vw - 36px)); max-height: min(620px, calc(100vh - 36px)); display: flex; flex-direction: column; background: var(--pop-surface); color: var(--pop-ink); border: var(--edge) solid var(--pop-border); border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow); overflow: hidden; } .chatPanel[hidden] { display: none; } .chatPanel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--pop-accent); color: var(--pop-on-accent); } .chatPanel__head small { display: block; font-size: .78rem; opacity: .9; } .chatPanel__close { background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; } .chatPanel__identify, .chatPanel__log, .chatThread__log { padding: 16px 18px; overflow-y: auto; } .chatPanel__identifyLead { font-size: .9rem; } .chatIdentifyForm { display: grid; gap: 8px; margin-top: 14px; } .chatIdentifyForm label { font-size: .82rem; font-weight: 700; } .chatPanel__log { flex: 1; min-height: 140px; } .chatPanel__form, .chatThread__form { display: flex; gap: 8px; padding: 12px 18px; border-top: var(--edge) solid var(--pop-border); } .chatPanel__form textarea, .chatThread__form textarea { flex: 1; resize: vertical; } .chatPanel__note { font-size: .74rem; opacity: .7; padding: 0 18px 14px; margin: 0; } .chatPage { max-width: 760px; } .chatThread { border: var(--edge) solid var(--pop-border); border-radius: var(--radius); background: var(--pop-surface); overflow: hidden; } .chatThread__log { max-height: 60vh; } .chatThread__closed { padding: 12px 18px; background: #FFF0C2; margin: 0; font-size: .9rem; } .msg { margin: 0 0 16px; max-width: 85%; } .msg--visitor { margin-left: auto; } .msg__who { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 0 0 4px; } .msg__body { padding: 12px 16px; border-radius: 16px; border: 2px solid var(--pop-border); background: var(--pop-bg); overflow-wrap: anywhere; } .msg--visitor .msg__body { background: var(--pop-accent); color: var(--pop-on-accent); } .msg--system .msg__body { background: #FFF0C2; color: #3A2A00; font-size: .88rem; white-space: pre-wrap; } .msg__time { display: block; font-size: .7rem; opacity: .55; margin-top: 4px; } .msg__attach { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px; text-decoration: none; border: 2px solid var(--pop-border); border-radius: 14px; background: var(--pop-bg); } .msg__attach img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; } /* ---------------------------------------------------------- Publicité */ .adBlock { border: var(--edge) dashed var(--pop-border); border-radius: var(--radius); overflow: hidden; background: var(--pop-surface); } .adBlock--house .adBlock__link { text-decoration: none; color: inherit; display: block; } .adBlock__text { padding: 18px 20px; } .adBlock__title { display: block; font-family: var(--font-display); font-size: 1.2rem; } .adBlock__body { font-size: .9rem; margin: .4em 0 1em; } .adBlock__cta { display: inline-block; font-weight: 700; padding: .5em 1.1em; border-radius: 999px; background: var(--pop-accent); color: var(--pop-on-accent); } /* Réserve de hauteur pour un bloc AdSense : sans elle, le remplissage asynchrone décale la page (CLS). */ .adBlock--adsense { min-height: 280px; } /* ------------------------------------------------------------ Pagination */ .pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 48px 0; flex-wrap: wrap; } .pagination a, .pagination span { padding: .55em 1em; text-decoration: none; font-weight: 700; border: var(--edge) solid var(--pop-border); border-radius: 999px; background: var(--pop-surface); } .pagination .is-current, .pagination [aria-current="page"] { background: var(--pop-accent); color: var(--pop-on-accent); } .searchTabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 32px; } .searchTabs a { text-decoration: none; font-weight: 700; padding: .5em 1em; border-radius: 999px; border: var(--edge) solid var(--pop-border); background: var(--pop-surface); } .searchTabs a.is-current { background: var(--pop-ink); color: var(--pop-bg); } .searchTabs small { opacity: .6; margin-left: .4em; } /* ------------------------------------------------------------ Pied de page */ .siteFooter { border-top: var(--edge) solid var(--pop-border); background: var(--pop-surface); padding: 48px 0 24px; margin-top: 60px; } .siteFooter__inner { width: var(--page); margin: 0 auto; display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr 1fr 1fr; } .siteFooter__brand p { font-size: .9rem; opacity: .8; max-width: 34ch; } .siteFooter__col { display: flex; flex-direction: column; gap: 8px; } .siteFooter__col h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 4px; } .siteFooter__col a { text-decoration: none; font-size: .92rem; } .siteFooter__col a:hover { text-decoration: underline; } .siteFooter__legal { width: var(--page); margin: 32px auto 0; font-size: .78rem; opacity: .6; } /* ------------------------------------------------------------- Mobile */ @media (max-width: 860px) { .navToggle { display: block; order: 3; width: 46px; height: 46px; cursor: pointer; background: var(--pop-surface); border: var(--edge) solid var(--pop-border); border-radius: 12px; } .navToggle span, .navToggle span::before, .navToggle span::after { display: block; width: 20px; height: 3px; background: var(--pop-ink); margin: 0 auto; position: relative; } .navToggle span::before { content: ""; position: absolute; top: -6px; } .navToggle span::after { content: ""; position: absolute; top: 6px; } .siteNav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 12px 0; } .siteNav.is-open { display: flex; } .searchBox { order: 4; max-width: none; flex-basis: 100%; } .siteFooter__inner { grid-template-columns: 1fr 1fr; } .chatPanel { right: 8px; left: 8px; bottom: 8px; width: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .pin:hover, .btn:hover, .tagCard a:hover { transform: none; } } @media print { .siteHeader, .siteFooter, .chatLauncher, .chatPanel, .croBand, .adBlock { display: none !important; } body { background: #fff; color: #000; } } /* ===================================================================== POP ART — le cran au-dessus --------------------------------------------------------------------- Ce bloc assume le parti pris : trames de points, contours plus épais, ombres franches, typographie lourde, tuiles éditoriales dans le mur. Il vient après le reste pour surcharger les valeurs de base sans toucher aux règles d'origine. ===================================================================== */ :root { --edge: 3px; --shadow: 8px 8px 0 var(--pop-border); --shadow-sm: 5px 5px 0 var(--pop-border); --shadow-lg: 12px 12px 0 var(--pop-border); } /* Trame de points façon impression offset. Réservée aux pages NEUTRES : sur un fond d'univers sombre, des points noirs ne se verraient pas, et des points clairs saliraient l'aplat qui fait tout l'effet. */ body:not(.has-theme) { background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 20, .13) 1px, transparent 0); background-size: 15px 15px; background-attachment: fixed; } /* Titres : plus lourds, plus serrés. */ h1, h2, h3, .btn, .kicker { text-wrap: balance; } h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); letter-spacing: -.035em; } h2 { letter-spacing: -.03em; } /* En-tête collant : sur un mur infini, perdre la recherche au défilement oblige à remonter tout en haut pour changer d'univers. */ .siteHeader { position: sticky; top: 0; z-index: 40; background: var(--pop-bg); border-bottom: var(--edge) solid var(--pop-border); padding: 12px 0 0; } .brand__mark { /* Pastille bicolore : un aplat dans un aplat, signature de la charte. */ background: radial-gradient(circle at 50% 50%, var(--pop-accent) 0 38%, transparent 39%), var(--pop-surface); } .tagRail { margin-top: 10px; padding-bottom: 10px; } .tagChip { border-width: 2px; font-weight: 800; letter-spacing: -.01em; box-shadow: 3px 3px 0 var(--pop-border); transition: transform .12s ease, box-shadow .12s ease; } .tagChip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pop-border); } /* ------------------------------------------------------- Les épingles --- Léger basculement au survol : la carte se décolle comme un autocollant. Volontairement discret (0.6°) — au-delà, la lecture d'une colonne devient fatigante. */ .pin { border-width: var(--edge); box-shadow: var(--shadow-sm); transition: transform .16s cubic-bezier(.2, .8, .3, 1.2), box-shadow .16s ease; } .pin:hover { transform: translate(-4px, -5px) rotate(-.6deg); box-shadow: var(--shadow-lg); z-index: 2; } .pin__title { font-size: 1.1rem; letter-spacing: -.02em; } .pin__count, .pin__private { border: 2px solid var(--pop-border); font-weight: 800; letter-spacing: .02em; } /* ------------------------------------------- Tuiles éditoriales du mur --- Elles participent à la MÊME maçonnerie que les photos : c'est ce qui permet d'ouvrir l'accueil sur la grille tout en disant quelque chose. */ .wallTile { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 var(--gap); padding: clamp(22px, 2.4vw, 34px); border: var(--edge) solid var(--pop-border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--pop-accent); color: var(--pop-on-accent); /* Trame en surimpression : l'aplat seul paraît plat en grand format. */ background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .16) 1px, transparent 0); background-size: 13px 13px; } .wallTile__kicker { display: inline-block; font-family: var(--font-display); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 10px; padding: .3em .8em; border-radius: 999px; background: var(--pop-on-accent); color: var(--pop-accent); } .wallTile__title { font-family: var(--font-display); line-height: .98; letter-spacing: -.035em; font-size: clamp(1.9rem, 2.6vw, 2.9rem); margin: 0 0 .35em; } .wallTile__lead { font-size: 1.02rem; opacity: .94; margin-bottom: 1.2em; } .wallTile .btn { background: var(--pop-on-accent); color: var(--pop-accent); border-color: var(--pop-border); font-size: .96rem; } /* La tuile d'accroche porte le h1 : elle domine, sans écraser la grille. */ .wallTile--hero { background-color: #FFC93C; color: #1A1A1A; } .wallTile--hero .wallTile__kicker { background: #E63946; color: #FFF8F0; } .wallTile--hero .btn { background: #E63946; color: #FFF8F0; } .wallTile--cta.wallTile--a { background-color: #2D6BFF; color: #FFFFFF; } .wallTile--cta.wallTile--a .btn { background: #FFC93C; color: #1A1A1A; } .wallTile--cta.wallTile--b { background-color: #00C49A; color: #04231C; } .wallTile--cta.wallTile--b .btn { background: #1A1A1A; color: #FFF8F0; } /* En grand écran, la tuile d'accroche vaut deux colonnes de haut : elle annonce le site sans repousser une seule photo hors du premier écran. */ @media (min-width: 1100px) { .wallTile--hero { padding: 40px 34px 44px; } .wallTile--hero .wallTile__title { font-size: clamp(2.4rem, 3vw, 3.4rem); } } .wall__ad { border-radius: var(--radius); } /* --------------------------------------------------- Cartes d'univers --- */ .tagCard a { border-width: var(--edge); box-shadow: var(--shadow-sm); min-height: 168px; } .tagCard a:hover { transform: translate(-4px, -5px) rotate(-.5deg); box-shadow: var(--shadow-lg); } .tagCard__name { font-size: 1.55rem; letter-spacing: -.03em; } /* ------------------------------------------------- Bandeau de conversion */ .croBand { box-shadow: var(--shadow-lg); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .16) 1px, transparent 0); background-size: 15px 15px; } .croBand__title { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.03em; } /* ----------------------------------------------------------- Le tchat --- */ .chatLauncher { box-shadow: var(--shadow); border-width: var(--edge); font-size: 1.02rem; } .chatLauncher:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); } .chatPanel { box-shadow: var(--shadow-lg); } /* ------------------------------------------------------------ Galerie --- */ .gallery__img { box-shadow: var(--shadow); } .postView__title { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.035em; } @media (prefers-reduced-motion: reduce) { .pin:hover, .tagCard a:hover, .tagChip:hover, .chatLauncher:hover { transform: none; } }