/* ---------------------------------------------------------------- pape-france.fr — PAGES INTERNES (namespace pf-*) ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Jost', system-ui, sans-serif; color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } /* ─── Titres : LeonXIV en capitales ─── */ h1, h2, .section-title, /*[class*="__title"],*/ /*[class*="__city"],*/ .place-card__city, .bv-place__city /*, [class$="-title"]*/ { font-family: 'LeonXIV', sans-serif !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: 0.01em !important; line-height: 0.98 !important; } /*h1 em,*/ h2 em, .section-title em { font-style: normal; color: var(--primary); } .pf-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .pf-wrap :not(.pf-grid) .pf-section { margin-inline: calc(50% - 50vw); width: auto; max-width: none; } .pf-section--cream { background: var(--cream); } /* ─── Eyebrow ───────────────────────────────────────────────────── */ .pf-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pf-eyebrow-color, var(--primary-deep)); display: inline-flex; align-items: center; gap: 12px; } .pf-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .pf-eyebrow--light { color: rgba(255,255,255,.85); } .pf-eyebrow--light::before { background: rgba(255,255,255,.7); } /* ─── Header (sticky, variante claire) ──────────────────────────── */ .site-header { position: sticky; top: var(--pf-flag-h); z-index: 50; background: rgba(251,250,246,0.85); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); line-height: 1.1; } .site-header__brand-main { font-size: 19px; font-weight: 600; letter-spacing: 0.015em; color: var(--ink); white-space: nowrap; } .site-header__brand-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .site-header__right { display: flex; align-items: center; gap: 22px; } .site-header__nav { display: flex; align-items: center; gap: 26px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .site-header__nav a { color: var(--ink-soft); text-decoration: none; transition: color .2s; white-space: nowrap; } .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--primary-deep); } .site-header__cta { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--paper); background: var(--ink); padding: 10px 18px; border-radius: 999px; transition: background .2s; white-space: nowrap; } .site-header__cta:hover { background: var(--primary-deep); } /* Hamburger (mobile) : SUPPRIMÉ en v4.1. .site-header__toggle était la troisième copie d'un burger fait main jamais câblé — aucun JS du site ne pose [data-open]. Les deux autres (.papefrance-siteheader__toggle, .papefrance-topbar__toggle) sont parties en même temps. Le seul bouton de menu du site est celui de GenerateBlocks, .gb-menu-toggle. */ /* ─── Breadcrumb ────────────────────────────────────────────────── */ .pf-crumb { margin-bottom: 26px; } .pf-crumb nav p { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--pf-crumb-color, var(--ink-mute)); margin-bottom: 0; } .pf-crumb a { color: inherit; text-decoration: none; transition: color .2s; } .pf-crumb a:hover { color: var(--pf-crumb-hover, var(--primary-deep)); } .pf-crumb .separator { opacity: 0.7; } .pf-crumb .last { color: var(--pf-crumb-color, var(--ink)); } /* contextes sombres : --pf-crumb-color hérité par a, .last, .separator */ .pape-hero, .lieu-hero, .ev-hero, .ag-intro, .pr-intro, .tr-intro, .bv-hero { --pf-crumb-color: rgba(255,255,255,.75); } /* hover blanc uniquement sur heroes photo */ .lieu-hero, .ev-hero, .bv-hero { --pf-crumb-hover: #fff; } /* pf-eyebrow sur fond sombre (fonds solides — hero photo utilise .pf-eyebrow--light) */ .pape-hero, .ag-intro, .pr-intro, .tr-intro, .bv-hero { --pf-eyebrow-color: rgba(255,255,255,.85); } /* ─── Buttons ───────────────────────────────────────────────────── */ .pf-btn { appearance: none; border: none; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; padding: 16px 30px; border-radius: 999px; cursor: pointer; transition: all .2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; line-height: 1; } .pf-btn .arrow { transition: transform .2s; } .pf-btn:hover .arrow { transform: translateX(3px); } .pf-btn-primary { background: var(--ink); color: var(--paper); } .pf-btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); } .pf-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .pf-btn-ghost:hover { background: var(--ink); color: var(--paper); } .pf-btn-light { background: var(--paper); color: var(--ink); } .pf-btn-light:hover { background: #fff; transform: translateY(-1px); } /* ─── Section heading helper ────────────────────────────────────── */ .section-title { font-weight: 500; font-size: clamp(34px, 4vw, 50px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; color: var(--ink); text-wrap: balance; } .section-title em { font-style: italic; color: var(--primary); font-weight: 400; } /* ─── Prose (rich text body) ────────────────────────────────────── */ .prose { color: var(--ink-soft); } .prose > * + * { margin-top: 22px; } .prose h2 { font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 56px 0 0; margin: 56px 0 23px; font-family: 'Jost', sans-serif !important; text-transform: initial !important; } .prose h3 { font-weight: 600; font-size: 23px; color: var(--ink); margin: 36px 0 0; } .prose p { /* margin: 0;*/ /* font-size: 17px;*/ font-size: 19px; line-height: 1.7; max-width: 65ch; } .prose a:not(.pf-btn-primary) { color: var(--primary-deep); text-underline-offset: 3px; } .prose ul, .prose ol { margin: 0; padding-left: 1.1em; max-width: 62ch; } .prose li { margin: 0 0 10px; line-height: 1.6; } .prose li::marker { color: var(--primary); } .prose img { border-radius: 5px; margin-top: 32px; margin-bottom: 1.5em; } .prose figcaption { font-size: 13px; color: var(--ink-mute); margin-top: 10px; } .prose blockquote { margin: 36px 0; padding-left: 24px; border-left: 2px solid var(--primary); font-size: 26px; line-height: 1.3; color: var(--ink); font-style: italic; } /* Callout card */ .callout { background: var(--primary-wash); border: 1px solid var(--primary-tint); border-radius: 6px; padding: 28px 32px; margin-top: 32px; } .callout h3 { font-weight: 500; font-size: 22px; margin: 0 0 8px; color: var(--ink); } .callout p { margin: 0; font-size: 15px; color: var(--ink-soft); } /* ─── Newsletter strip (shared) ─────────────────────────────────── */ .nl-strip { background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%); color: #fff; padding: 90px var(--pad); text-align: center; position: relative; overflow: hidden; } .nl-strip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.06) 0%, transparent 40%); pointer-events: none; } .nl-strip__inner { max-width: 640px; margin: 0 auto; position: relative; } .nl-strip h2 { font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 16px 0 12px; } .nl-strip p { color: rgba(255,255,255,.8); margin: 0 0 28px; font-size: 16px; } .nl-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; } .nl-form input { flex: 1; min-width: 200px; appearance: none; border: none; border-radius: 999px; padding: 16px 22px; font-family: 'Jost', sans-serif; font-size: 15px; color: var(--ink); background: var(--paper); outline: none; } /* ─── SKIN FLUENT FORMS pour le bandeau newsletter──────────────── */ .nl-strip form.nl-form:not(.frm-fluent-form) { display: none !important; } /* ─── 1. Conteneur, se comporte comme `.nl-form` ─────────── */ .nl-strip .fluentform, .nl-strip .frm-fluent-form { margin: 0 auto !important; /*max-width: 460px !important;*/ } .nl-strip .frm-fluent-form fieldset { padding: 0 !important; margin: 0 !important; } /* Colonnes Fluent */ .nl-strip .frm-fluent-form .ff-t-container, .nl-strip .ff-t-container.ff-column-container { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; max-width: 590px !important; margin: 0 auto !important; align-items: stretch !important; } /* Annule flex-basis:50% inline : email extensible, bouton auto */ .nl-strip .ff-t-cell { flex-basis: auto !important; padding: 0 !important; } .nl-strip .ff-t-column-1 { flex: 1 1 auto !important; min-width: 70% !important; } .nl-strip .ff-t-column-2 { flex: 0 0 auto !important; } /* neutralise */ .nl-strip .ff-el-group { margin: 0 !important; } .nl-strip .ff-el-input--content { margin: 0 !important; } /* ─── 2. Input e-mail ────── */ .nl-strip .ff-el-form-control, .nl-strip input.ff-el-form-control[type="email"] { width: 100% !important; height: auto !important; appearance: none; border: none !important; border-radius: 999px !important; padding: 12.5px 22px !important; font-family: 'Jost', system-ui, sans-serif !important; font-size: 15px !important; line-height: 1.2 !important; color: var(--ink) !important; background: var(--paper) !important; box-shadow: none !important; outline: none !important; } .nl-strip .ff-el-form-control::placeholder { color: rgba(20,17,50,.45); } .nl-strip .ff-el-form-control:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.35) !important; } .nl-strip .ff-el-input--label { display: inherit !important; text-align: left; } .nl-strip .ff-custom_html p { margin: 28px 0; } /* ─── 3. Bouton submit : pf-btn pf-btn-cta (orange) ─────────────── */ .nl-strip .ff_submit_btn_wrapper, .nl-strip .ff_submit_btn_wrapper_custom { margin: 0 !important; padding: 0 !important; background: transparent !important; display: flex; align-self: center; } .nl-strip .ff-btn-submit, .nl-strip button.ff-btn.ff-btn-submit { appearance: none; border: none !important; cursor: pointer; width: auto !important; height: auto !important; font-family: 'Jost', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; text-transform: none !important; padding: 16px 30px !important; border-radius: 999px !important; line-height: 1 !important; white-space: nowrap; background: var(--yellow, #FFA107) !important; color: var(--navy-900, #091d5a) !important; box-shadow: none !important; transition: all .2s ease !important; } .nl-strip .ff-btn-submit:hover, .nl-strip button.ff-btn.ff-btn-submit:hover { background: var(--yellow-hover, #ffb735) !important; transform: translateY(-1px); } /* ─── 4. Détails Fluent à neutraliser ───────────────────────────── */ /* honeypot / anti-spam */ .nl-strip .ff-hpsf-container { display: none !important; } /* messages d'erreur */ .nl-strip .ff-el-is-error .text-danger, .nl-strip .error.text-danger, .nl-strip #fluentform_2_errors { color: #fff !important; font-family: 'Jost', system-ui, sans-serif; font-size: 13px; text-align: center; margin-top: 10px; } /* bordure erreur */ .nl-strip .ff-el-form-control.ff-el-is-error { box-shadow: 0 0 0 2px #ffd0d0 !important; } /* message succès */ .nl-strip .ff-message-success { color: #fff !important; font-family: 'Jost', system-ui, sans-serif; text-align: center; } @media (max-width: 460px) { .nl-strip .ff-t-column-1, .nl-strip .ff-t-column-2 { flex: 1 1 100% !important; } .nl-strip .ff-btn-submit { width: 100% !important; } } /* ─── Related cards (À voir aussi) ──────────────────────────────── */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .related-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .related-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(20,17,50,.4); } .related-card__img { height: 150px; width: 100%; object-fit: cover; background: var(--primary-tint); } .related-card__body { padding: 22px 24px 26px; } .related-card__kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 8px; } .related-card__title { font-size: 24px; font-weight: 500; color: var(--ink); margin: 0; line-height: 1.1; } /* ─── Responsive ────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --pad: 24px; } .site-header__right { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -28px rgba(20,17,50,.5); padding: 8px var(--pad) 20px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .site-header[data-open="true"] .site-header__right { opacity: 1; transform: translateY(0); pointer-events: auto; } .site-header { position: sticky; } .site-header__inner { position: relative; } .site-header__nav { flex-direction: column; align-items: stretch; gap: 0; font-size: 15px; } .site-header__nav a { padding: 14px 2px; border-bottom: 1px solid var(--rule); } .site-header__cta { text-align: center; margin-top: 16px; padding: 14px 18px; } .related-grid { grid-template-columns: 1fr; } /* ─── 3. Bouton submit : pf-btn pf-btn-cta (orange) ─────────────── */ .nl-strip .ff_submit_btn_wrapper, .nl-strip .ff_submit_btn_wrapper_custom { display: inline-flex; } .pf-crumb .last { max-width: 140px; text-wrap-mode: nowrap; overflow: auto; } } /* --- Page : le-pape --- */ .site-header { position: relative; } /* ─── Hero portrait ───────────────────────────────────────────── */ .pape-hero { background: var(--primary-deep); color: #fff; overflow: hidden; } .pape-hero__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } .pape-hero__text { padding: 96px 64px 96px var(--pad); align-self: center; } .pape-hero .pf-crumb { margin-bottom: 28px; } .pape-hero .pf-eyebrow { margin-bottom: 22px; } .pape-hero h1 { font-weight: 500; font-size: clamp(52px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 20px; } .pape-hero h1 .sub { display: block; font-style: italic; font-size: 0.5em; color: var(--primary-soft); margin-top: 10px; letter-spacing: 0; } .pape-hero__lead { font-size: 24px; line-height: 1.4; color: rgba(255,255,255,.9); max-width: 44ch; margin: 0; } .pape-hero__photo { position: relative; min-height: 520px; } .pape-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; } /* ─── Bandeau dates clés ─────────────────────────────────────── */ .pape-facts { background: var(--ink); color: #fff; } .pape-facts__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); } .pape-fact { padding: 32px 28px; border-left: 1px solid rgba(255,255,255,.12); } .pape-fact:first-child { border-left: none; padding-left: 0; } .pape-fact .l { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 9px; } .pape-fact .v { font-size: 22px; line-height: 1.15; color: #fff; } /* ─── Biographie (prose + aside repères) ─────────────────────── */ .bio { padding: 96px 0; } .bio__grid { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; } .bio__main .pf-eyebrow { margin-bottom: 22px; } .bio__aside { position: sticky; top: calc(84px + var(--pf-flag-h)); } .repere { background: var(--cream); border: 1px solid var(--rule); border-radius: 8px; padding: 26px 26px 28px; } .repere h3 { font-weight: 500; font-size: 20px; margin: 0 0 16px; color: var(--ink); } .repere__row { padding: 12px 0; border-top: 1px solid var(--rule); } .repere__row:first-of-type { border-top: none; } .repere__row .k { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 3px; } .repere__row .vv { font-size: 18px; color: var(--ink); } /* ─── Devise / citation ──────────────────────────────────────── */ .devise { background: var(--primary-wash); padding: 110px 48px; position: relative; overflow: hidden; } .devise::before { content: "“"; position: absolute; top: -50px; left: 4vw; font-size: 440px; line-height: 1; color: var(--primary); opacity: 0.08; pointer-events: none; } .devise__wrap { max-width: 900px; margin: 0 auto; position: relative; } .devise .pf-eyebrow { margin-bottom: 32px; } .devise blockquote { margin: 0; font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.22; letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; } .devise .latin { display: block; margin-top: 24px; font-style: italic; font-size: 0.6em; color: var(--primary-deep); } /* ─── Timeline parcours ──────────────────────────────────────── */ .parcours { padding: 96px 0; } .parcours__head { margin-bottom: 56px; } .parcours__head .pf-eyebrow { margin-bottom: 20px; } .ptl { max-width: 820px; border-top: 1px solid var(--rule); } .ptl-item { display: grid; grid-template-columns: 130px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .ptl-year { font-size: 24px; font-weight: 500; color: var(--primary-deep); font-variant-numeric: tabular-nums; } .ptl-body h3 { font-weight: 500; font-size: 23px; margin: 0 0 5px; color: var(--ink); line-height: 1.12; } .ptl-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 60ch; } /* ─── CTA voyage ─────────────────────────────────────────────── */ .pape-cta { padding: 96px 48px; background: var(--cream); text-align: center; } .pape-cta__inner { max-width: 640px; margin: 0 auto; } .pape-cta .pf-eyebrow { justify-content: center; margin-bottom: 22px; } .pape-cta h2 { margin-bottom: 16px; } .pape-cta p { color: var(--ink-soft); font-size: 17px; margin: 0 0 32px; } @media (max-width: 900px) { .pape-hero__grid { grid-template-columns: 1fr; } .pape-hero__text { padding: 72px 24px 40px; } .pape-hero__photo { min-height: 380px; } .pape-facts__grid { grid-template-columns: 1fr 1fr; } .pape-fact { padding: 22px 18px; } .pape-fact:nth-child(3) { border-left: none; padding-left: 0; } .bio__grid { grid-template-columns: 1fr; gap: 36px; } .bio__aside { position: static; } .devise { padding: 80px 24px; } .ptl-item { grid-template-columns: 84px 1fr; gap: 18px; } } /* --- Page : lieu --- */ /* Sur les pages de lieu, l'en-tête de site n'est pas collant : c'est la barre de section (sous-nav) qui prend le relais. */ /* ─── Hero lieu ───────────────────────────────────────────────── */ .lieu-hero { position: relative; min-height: 540px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: linear-gradient(180deg, var(--primary-deep), var(--primary)); } .lieu-hero__media { position: absolute; inset: 0; z-index: 0; } .lieu-hero__media img { width: 100%; height: 100%; } .lieu-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,50,.45) 0%, rgba(20,17,50,.10) 30%, rgba(20,17,50,.30) 60%, rgba(20,17,50,.85) 100%); } .lieu-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 52px; } .lieu-hero .pf-crumb { margin-bottom: 24px; } .lieu-badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; } .lieu-hero h1 { font-weight: 500; font-size: clamp(56px, 9vw, 120px); line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .lieu-hero__role { font-style: italic; font-size: clamp(19px, 2.4vw, 28px); color: rgba(255,255,255,.9); margin: 16px 0 0; max-width: 46ch; } /* ─── Barre de section collante (onglets/ancres) ─────────────── */ /* Collée SOUS l'en-tête, jamais à 0 : l'en-tête est collant lui aussi, avec un z-index supérieur, et recouvrait donc la barre dès qu'elle se posait. Sa hauteur va de 99 px en grand écran à 166 px vers 800 px de large : le décalage ne peut pas s'écrire en dur, pf-theme.js le publie dans --pf-topbar-h. Le repli à 0 vaut pour le mobile, où l'en-tête s'efface au défilement, et si le script ne s'exécute pas. */ .lieu-subnav { --pf-subnav-bg: rgba(251,250,246,.92); position: sticky; top: calc(var(--pf-topbar-h, 0px) + var(--pf-flag-h)); z-index: 40; background: var(--pf-subnav-bg); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--rule); } .lieu-subnav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 8px; } .lieu-subnav__here { font-size: 19px; font-weight: 600; color: var(--ink); padding-right: 22px; margin-right: 6px; border-right: 1px solid var(--rule); white-space: nowrap; } .lieu-subnav__links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .lieu-subnav__links::-webkit-scrollbar { display: none; } .lieu-subnav__links a { padding: 17px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .lieu-subnav__links a { text-decoration: solid underline var(--navy) 4px; text-underline-offset: 3px; } .lieu-subnav__links a:nth-child(1) { text-decoration-color: var(--navy); } .lieu-subnav__links a:nth-child(2) { text-decoration-color: var(--red); } .lieu-subnav__links a:nth-child(3) { text-decoration-color: var(--cyan); } .lieu-subnav__links a:nth-child(4) { text-decoration-color: var(--green); } .lieu-subnav__links a:nth-child(5) { text-decoration-color: var(--yellow); } .lieu-subnav__links a:hover { color: var(--primary-deep); } /* Sur une fiche, la barre arrive sous un héros déjà haut et devant un bandeau de faits : les 59 px de la version étape repoussaient tout le contenu. Seul le sommaire des fiches est resserré, la barre des pages étape ne bouge pas. */ .pf-sommaire .lieu-subnav__links a { padding: 12px 14px; font-size: 13px; } /* Chevrons de défilement : la barre déborde dès que les libellés dépassent la largeur, et rien ne le disait – la dernière entrée était coupée net, sans indice qu'on pouvait la faire venir. Ils sont posés et pilotés par pf-theme.js, qui seul connaît la position de défilement, et disparaissent à chaque extrémité atteinte. Le dégradé reprend --pf-subnav-bg, redéfini en sombre, pour que les libellés s'effacent dessous au lieu d'être tranchés. */ .lieu-subnav__chev { position: absolute; top: 0; bottom: 0; width: 46px; z-index: 1; display: flex; align-items: center; border: 0; padding: 0; cursor: pointer; color: var(--ink-soft); background: linear-gradient(to right, var(--pf-subnav-bg) 58%, transparent); } /* hidden ne vaut display:none que dans la feuille du NAVIGATEUR : sans cette règle, le display:flex ci-dessus le bat et les chevrons restent visibles. */ .lieu-subnav__chev[hidden] { display: none; } .lieu-subnav__chev--avant { left: 0; justify-content: flex-start; padding-left: 6px; } .lieu-subnav__chev--apres { right: 0; justify-content: flex-end; padding-right: 6px; background-image: linear-gradient(to left, var(--pf-subnav-bg) 58%, transparent); } .lieu-subnav__chev svg { width: 20px; height: 20px; } .lieu-subnav__chev:hover { color: var(--primary-deep); } .lieu-subnav__links a.is-active { color: var(--primary-deep); border-bottom-color: var(--primary); } .lieu-subnav__cta { margin-left: auto; padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s; } .lieu-subnav__cta:hover { background: var(--primary-deep); } .lieu-section { scroll-margin-top: 72px; } /* ─── Faits clés ─────────────────────────────────────────────── */ .facts { background: var(--ink); color: #fff; } .facts__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); } .fact { padding: 34px 28px; border-left: 1px solid rgba(255,255,255,.12); } .fact:first-child { border-left: none; padding-left: 0; } .fact__label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.55); color: #f0a818; margin-bottom: 10px; } .fact__value { font-size: 23px; line-height: 1.15; color: #fff; } /* ─── Programme (timeline groupée par jour) ──────────────────── */ .programme { padding: 96px 0; } .programme__head { margin-bottom: 48px; } .programme__head .pf-eyebrow { margin-bottom: 20px; } .tl-day { font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-deep); margin: 40px 0 4px; } .tl-day:first-of-type { margin-top: 0; } .programme .tl-day{ position: sticky; top: var(--pf-sticky-top,0px); z-index: 5; display: flex; align-items: center; gap: 14px; margin-inline: -26px; padding: 16px 26px 13px; background: var(--paper); box-shadow: 0 1px 0 var(--rule) } .programme .tl-day::before{content:"";width:46px;height:4px;border-radius:2px;background:var(--jour,var(--primary));flex:none} #j25{--jour:var(--primary)} #j26{--jour:var(--red)} #j27{--jour:var(--cyan)} #j28{--jour:var(--yellow)} .timeline { max-width: 860px; } .tl-item { display: grid; grid-template-columns: 180px 1fr; grid-template-columns: 180px 1fr auto; grid-template-columns: 180px 1fr 1fr; grid-template-columns: 180px 1fr fit-content(260px); gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .tl-time { font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .tl-body h3 { font-weight: 500; font-size: 25px; margin: 0 0 6px; color: var(--ink); line-height: 1.12; } .tl-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 56ch; } .tl-place { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; } .tl-place svg { width: 15px; height: 15px; color: var(--primary); flex: none; } .tl-tag { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-deep); background: var(--primary-tint); padding: 5px 12px; border-radius: 999px; } /* ─── Événements grand public ─────────────────────────────────── */ .events { padding: 96px 0; background: var(--cream); } .events__head { margin-bottom: 44px; } .events__head .pf-eyebrow { margin-bottom: 20px; } .events__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .event-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -32px rgba(20,17,50,.4); } .event-card__img { width: 100%; height: 220px; display: block; } .event-card__body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; } .event-card__meta { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 12px; } .event-card__title { font-weight: 500; font-size: 28px; line-height: 1.08; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.005em; } .event-card__desc { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; flex: 1; } .event-card__go { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .event-card__go .arrow { transition: transform .2s; } .event-card:hover .event-card__go .arrow { transform: translateX(4px); } /* ─── Le Pape à ... ──────────────────────────────────────── */ .pope-here { padding: 96px 0; } .pope-here__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 64px; align-items: center; } .pope-here__text .pf-eyebrow { margin-bottom: 22px; } .pope-here__text h2 { margin-bottom: 22px; } .pope-here__text p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 16px; max-width: 54ch; } .pope-here__img { border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(20,17,50,.45); } .pope-here__img img { width: 100%; height: 460px; } /* ─── Participer (cartes infos + CTA) ────────────────────────── */ .participer { padding: 96px 0; background: var(--cream); } .participer__head { margin-bottom: 44px; max-width: 640px; } .participer__head .pf-eyebrow { margin-bottom: 20px; } .participer__head p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 16px 0 0; } .participer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .info-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 30px 28px 32px; } .info-card__icon { width: 30px; height: 30px; color: var(--primary); margin-bottom: 16px; } .info-card__icon svg { width: 100%; height: 100%; } .info-card h3 { font-weight: 500; font-size: 22px; margin: 0 0 9px; color: var(--ink); } .info-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } .participer__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; } /* ─── Soutenir ───────────────────────────────────────────────── */ .soutenir { padding: 96px 0; } .soutenir__head { margin-bottom: 44px; max-width: 640px; } .soutenir__head .pf-eyebrow { margin-bottom: 20px; } .soutenir__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .support-card { display: flex; flex-direction: column; padding: 38px 36px; border-radius: 8px; background: var(--primary-wash); border: 1px solid var(--primary-tint); } .support-card h3 { font-weight: 500; font-size: 27px; margin: 0 0 10px; color: var(--ink); } .support-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0 0 24px; flex: 1; } /* ─── Actualités du lieu ─────────────────────────────────────── */ .lieu-actus { padding: 96px 0; background: var(--cream); } .lieu-actus__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; } .lieu-actus__head .pf-eyebrow { margin-bottom: 20px; } .lieu-actus__all { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-deep); text-decoration: none; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; } .lieu-actus__all .arrow { transition: transform .2s; } .lieu-actus__all:hover .arrow { transform: translateX(4px); } /* ─── Autres étapes ──────────────────────────────────────────── */ .others { padding: 96px 0; } .others__head { margin-bottom: 40px; } .others__head .pf-eyebrow { margin-bottom: 20px; } .others .related-grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; } @media (max-width: 900px) { .lieu-subnav__here { display: none; } .facts__grid { grid-template-columns: 1fr 1fr; } .fact { padding: 24px 20px; } .fact:nth-child(3) { border-left: none; padding-left: 0; } .tl-item { grid-template-columns: 1fr; gap: 4px; } .tl-time { font-size: 19px; } .events__grid { grid-template-columns: 1fr; } .pope-here__grid { grid-template-columns: 1fr; gap: 36px; } .participer__grid { grid-template-columns: 1fr; } .soutenir__grid { grid-template-columns: 1fr; } .others .related-grid { grid-template-columns: 1fr; } } /* --- Page : évènement --- */ /* ─── Hero événement ──────────────────────────────────────────── */ .ev-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: linear-gradient(180deg, var(--primary-deep), var(--primary)); } .ev-hero__media { position: absolute; inset: 0; z-index: 0; } .ev-hero__media img { width: 100%; height: 100%; } .ev-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,50,.5) 0%, rgba(20,17,50,.12) 35%, rgba(20,17,50,.35) 65%, rgba(20,17,50,.88) 100%); } .ev-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 52px; } .ev-hero .pf-crumb { margin-bottom: 22px; } .ev-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; } .ev-hero h1 { font-weight: 500; font-size: clamp(42px, 6.5vw, 82px); line-height: 0.98; letter-spacing: -0.015em; margin: 0; max-width: 18ch; } /* ─── Barre d'infos clés + CTA collante ──────────────────────── */ .ev-bar { /*position: sticky;*/ top: 0; z-index: 40; background: var(--ink); color: #fff; } .ev-bar__inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .ev-bar__facts { display: flex; gap: 32px; flex-wrap: wrap; } .post-1972 .ev-bar__facts { gap: 22px; } .ev-bar__fact { display: flex; flex-direction: column; gap: 2px; max-width: 330px; } .ev-bar__fact .l { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.55); color: #f0a818; } .ev-bar__fact .v { font-size: 18px; color: #fff; } .ev-bar__cta { margin-left: auto; } .ev-bar__cta .pf-btn { padding: 12px 24px; } /* ─── Corps : prose + aside inscription ──────────────────────── */ .ev-body { padding: 90px 0; } .ev-body__grid { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; } .ev-body .pf-eyebrow { margin-bottom: 22px; } .ev-lead { font-size: 27px; line-height: 1.32; color: var(--ink); margin: 0 0 28px; text-wrap: pretty; } /* aside collante */ .ev-aside { position: sticky; top: calc(84px + var(--pf-flag-h)); } .ev-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 28px 28px 30px; box-shadow: 0 24px 50px -34px rgba(20,17,50,.3); } .ev-card h3 { font-weight: 500; font-size: 22px; margin: 0 0 18px; color: var(--ink); } .ev-card__row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 14px; } .ev-card__row:first-of-type { border-top: none; } .ev-card__row svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 1px; } .ev-card__row .k { color: var(--ink-mute-AAA); display: block; font-size: 13px; } .ev-card__row .vv { color: var(--ink); font-weight: 500; } .ev-card .pf-btn { width: 100%; justify-content: center; margin-top: 20px; } .ev-card__note { color: var(--ink-mute-AAA); text-align: center; margin: 12px 0 0; line-height: 1.5; } /* ─── Infos pratiques (cartes) ───────────────────────────────── */ .ev-infos { padding: 90px 0; background: var(--cream); } /* [pf_infos_pratiques] rend ce bloc DANS le contenu, et non plus depuis le gabarit : il se retrouve donc dans la colonne de texte, et son aplat crème s'arrêtait au bord de la colonne alors qu'il tenait toute la largeur. Même recette de pleine largeur que .also (cards.css), le .pf-wrap intérieur continuant de recentrer le contenu. overflow-x: clip sur le parent : sans lui, 50vw dépasse le viewport de la largeur de l'ascenseur et ramène une barre de défilement horizontale. */ .ev-content .ev-infos { margin-inline: calc(50% - 50vw); width: auto; max-width: none; } /* Le clip va sur la SECTION, qui tient déjà toute la largeur, jamais sur la colonne de texte : posé sur .ev-content il rognait l'aplat crème exactement à la largeur de la colonne, soit tout l'inverse de l'effet recherché. Il ne sert qu'à absorber les quelques pixels que 50vw prend de plus que la page quand l'ascenseur est visible. */ .ev-body { overflow-x: clip; } /* Dans le contenu, .prose impose Jost sans capitales à tous les h2, avec !important. Le bloc pratique n'est pas du texte courant mais une bande pleine largeur : son titre reprend la fonte des titres de section. */ .prose .ev-infos .section-title { font-family: 'LeonXIV', sans-serif !important; text-transform: uppercase !important; font-size: clamp(34px, 4vw, 50px); line-height: 0.98; margin: 0; } .ev-infos__head { margin-bottom: 44px; } .ev-infos__head .pf-eyebrow { margin-bottom: 20px; } .ev-infos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .info-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 30px 28px 32px; } .info-card__icon { width: 30px; height: 30px; color: var(--primary); margin-bottom: 16px; } .info-card__icon svg { width: 100%; height: 100%; } .info-card h3 { font-weight: 500; font-size: 22px; margin: 0 0 9px; color: var(--ink); } .info-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } /* ─── Carte / accès ──────────────────────────────────────────── */ .ev-map { padding: 0 0 90px; background: var(--cream); } /* La carte suivait la grille pratique du gabarit, qui lui apportait sa marge haute. Depuis que cette grille est passée dans le contenu, la carte suit la FAQ et sa façade touchait le bord de la section. Les fiches où la grille est restée dans le gabarit gardent l'ancien calage. */ .ev-map { padding-top: 90px; } .ev-infos + .ev-map { padding-top: 0; } /* Le bloc pratique rendu par [pf_infos_pratiques] termine le contenu, donc il redevient voisin de la carte. Deux blancs les séparaient : la marge basse du corps de fiche et la marge haute qu'on vient de rendre à la carte. On les retire pour retrouver l'aplat crème continu d'avant. Condition : que le bloc soit bien le dernier du contenu. Ailleurs dans la page, ces deux marges manqueraient. */ .ev-body:has(.ev-content .ev-infos) { padding-bottom: 0; } .ev-body:has(.ev-content .ev-infos) + .ev-map { padding-top: 0; } .ev-map__frame { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .ev-map__frame img { width: 100%; height: 420px; border-radius: 8px; overflow: hidden; display: block; } .ev-map__frame p { margin-bottom: 0; } @media (max-width: 900px) { .ev-bar__cta { margin-left: 0; width: 100%; } .ev-bar__cta .pf-btn { width: 100%; justify-content: center; } .ev-body__grid { grid-template-columns: 1fr; gap: 40px; } .ev-aside { position: static; } .ev-infos__grid { grid-template-columns: 1fr; } } /* --- Page : page-interne --- */ /* ─── Intro de page ───────────────────────────────────────────── */ .page-intro { background: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .page-intro .pf-eyebrow { margin-bottom: 20px; } .page-intro h1 { /*font-weight: 500;*/ font-size: clamp(44px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; color: var(--ink); max-width: 16ch; text-wrap: balance; } .page-intro h1 em { font-style: italic; color: var(--primary); font-weight: 400; } .page-intro .lead { font-size: 25px; line-height: 1.35; color: var(--ink-soft); max-width: 56ch; margin: 28px 0 0; text-wrap: pretty; } /* ─── Corps deux colonnes ─────────────────────────────────────── */ .page-body { padding: 80px 0 96px; } .page-body__grid { display: grid; grid-template-columns: 240px 1fr; gap: 72px; align-items: start; } /* Sommaire collant */ .toc { position: sticky; top: calc(138px + var(--pf-flag-h)); } .toc__label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); } .toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .toc__list a { text-decoration: none; color: var(--ink-soft); font-size: 14px; line-height: 1.4; transition: color .2s; display: block; padding-left: 14px; border-left: 2px solid transparent; } .toc__list a:hover { color: var(--primary-deep); border-left-color: var(--primary-soft); } .toc__card { margin-top: 32px; background: var(--primary-wash); border: 1px solid var(--primary-tint); border-radius: 6px; padding: 24px; } .toc__card h4 { font-weight: 500; font-size: 20px; margin: 0 0 6px; color: var(--ink); } .toc__card p { margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .toc__card .pf-btn { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14px; } /* ─── À voir aussi ────────────────────────────────────────────── */ .also { padding: 96px 0; background: var(--cream); } .also__head { margin-bottom: 44px; } .also__head .pf-eyebrow { margin-bottom: 20px; } @media (max-width: 900px) { .page-body__grid { grid-template-columns: 1fr; gap: 40px; } .toc { position: static; } .toc__list { flex-flow: row wrap; gap: 8px 18px; } .toc__card { display: none; } } /* --- Page : actualites --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .actu-intro { background: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .actu-intro .pf-crumb { margin-bottom: 26px; } .actu-intro .pf-eyebrow { margin-bottom: 20px; } .actu-intro h1 { font-weight: 500; font-size: clamp(44px, 6vw, 76px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; color: var(--ink); } /* ─── Filtres ─────────────────────────────────────────────────── */ .actu-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; } .actu-filter { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); text-decoration: none; transition: all .2s; } .actu-filter:hover { border-color: var(--primary-soft); color: var(--primary-deep); } .actu-filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ─── Une (article vedette) ──────────────────────────────────── */ .actu-feature { padding: 72px 0 0; } .actu-feature__card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s ease; } .actu-feature__card:hover { box-shadow: 0 36px 70px -40px rgba(20,17,50,.45); } .actu-feature__img { min-height: 380px; position: relative; } .actu-feature__img img { position: absolute; inset: 0; width: 100%; height: 100%; } .actu-feature__body { padding: 52px 52px; align-self: center; } .actu-feature__meta { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 16px; display: flex; gap: 14px; } .actu-feature__title { font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em; } .actu-feature__excerpt { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px; max-width: 50ch; } .actu-feature__go { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; } .actu-feature__go .arrow { transition: transform .2s; } .actu-feature__card:hover .actu-feature__go .arrow { transform: translateX(4px); } /* ─── Grille d'articles ──────────────────────────────────────── */ .actu-list { padding: 56px 0 96px; } .actu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; } .post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .post-card__img { width: 100%; height: 210px; border-radius: 7px; overflow: hidden; display: block; background: var(--primary-tint); position: relative; } .post-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; } .post-card__meta { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-deep); margin: 20px 0 10px; display: flex; gap: 12px; } .post-card__title { font-weight: 500; font-size: 24px; line-height: 1.12; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.005em; transition: color .2s; } .post-card:hover .post-card__title { color: var(--primary-deep); } .post-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* ─── Pagination ─────────────────────────────────────────────── */ .actu-more { display: flex; justify-content: center; margin-top: 64px; } @media (max-width: 900px) { .actu-feature__card { grid-template-columns: 1fr; } .actu-feature__img { min-height: 260px; } .actu-feature__body { padding: 36px 28px; } .actu-grid { grid-template-columns: 1fr; gap: 36px; } } /* --- Page : article --- */ /* ─── En-tête d'article ───────────────────────────────────────── */ .art-head { background: var(--cream); padding: 52px 0 56px; border-bottom: 1px solid var(--rule); } .art-head__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); } .art-head .pf-crumb { margin-bottom: 28px; } .art-meta { display: flex; gap: 16px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 22px; } .art-meta .cat { background: var(--primary-tint); padding: 6px 14px; border-radius: 999px; } .art-head h1 { font-weight: 500; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--ink); text-wrap: balance; } .art-head__chapo { font-size: 23px; line-height: 1.4; color: var(--ink-soft); margin: 0; } /* ─── Image principale ───────────────────────────────────────── */ .art-hero-img { max-width: 1100px; margin: -28px auto 0; padding: 0 var(--pad); } .art-hero-img figure { margin: 0; } .art-hero-img img { width: 100%; height: 520px; border-radius: 10px; overflow: hidden; display: block; box-shadow: 0 30px 64px -36px rgba(20,17,50,.4); } .art-hero-img figcaption { font-size: 13px; color: var(--ink-mute); margin-top: 12px; } /* ─── Corps + barre de partage ───────────────────────────────── */ .art-body { /* padding: 64px 0 88px;*/ padding: 64px 0 0; } .art-body__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); position: relative; } .art-share { display: flex; gap: 10px; align-items: center; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--rule); } .art-share > span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-right: 6px; } .art-share a { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: all .2s; } .art-share a:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-wash); } .art-share svg { width: 16px; height: 16px; } /* ─── Articles liés ──────────────────────────────────────────── */ .art-related { padding: 88px 0; background: var(--cream); } .art-related__head { margin-bottom: 40px; } .art-related__head .pf-eyebrow { margin-bottom: 18px; } @media (max-width: 900px) { .art-hero-img img { height: 320px; } } /* --- Page : Programme --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .ag-intro { background: var(--primary-deep); color: #fff; padding: 56px 0 64px; } .ag-intro .pf-crumb { margin-bottom: 26px; } .ag-intro .pf-eyebrow { margin-bottom: 20px; } .ag-intro h1 { font-weight: 500; font-size: clamp(44px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 18px; } .ag-intro p { font-size: 23px; line-height: 1.4; color: rgba(255,255,255,.9); max-width: 50ch; margin: 0; } /* ─── Onglets jours ──────────────────────────────────────────── */ .ag-tabs { position: sticky; top: var(--pf-flag-h); z-index: 40; background: rgba(251,250,246,.92); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--rule); } .ag-tabs__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .ag-tabs__inner::-webkit-scrollbar { display: none; } .ag-tabs__inner a { padding: 18px 22px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .ag-tabs__inner a:hover { color: var(--primary-deep); } .ag-tabs__inner a.is-active { color: var(--primary-deep); border-bottom-color: var(--primary); } .ag-tabs__inner a .d { display: block; font-size: 19px; font-weight: 500; color: var(--ink); } /* ─── Jour ───────────────────────────────────────────────────── */ .ag-day { padding: 80px 0; scroll-margin-top: 64px; } .ag-day:nth-child(even) { background: var(--cream); } .ag-day__head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; } .ag-day__num { font-size: 64px; font-weight: 500; color: var(--primary); line-height: 1; letter-spacing: -0.02em; } .ag-day__date { } .ag-day__date .dow { font-size: 34px; font-weight: 500; color: var(--ink); line-height: 1.05; } .ag-day__date .city { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-deep); margin-top: 4px; } .ag-events { max-width: 880px; border-top: 1px solid var(--rule); } .ag-event { display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: center; } .ag-event__time { font-size: 21px; font-weight: 500; color: var(--ink); } .ag-event__body h3 { font-weight: 500; font-size: 24px; margin: 0 0 5px; color: var(--ink); line-height: 1.1; } .ag-event__body p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; } .ag-event__body .place { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); } .ag-event__body .place svg { width: 14px; height: 14px; color: var(--primary); } .ag-event__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; } .ag-event__tag.public { background: var(--primary-tint); color: var(--primary-deep); } .ag-event__tag.invit { background: rgba(30,27,46,.06); color: var(--ink-soft); } /* ─── Note ───────────────────────────────────────────────────── */ .ag-note { padding: 0 0 80px; } .ag-note__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--pad); } .ag-callout { background: var(--primary-wash); border: 1px solid var(--primary-tint); border-radius: 8px; padding: 28px 32px; } .ag-callout h3 { font-weight: 500; font-size: 22px; margin: 0 0 8px; color: var(--ink); } .ag-callout p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; } @media (max-width: 900px) { .ag-event { grid-template-columns: 1fr; gap: 6px; } .ag-event__tag { justify-self: start; margin-top: 6px; } .ag-day__num { font-size: 48px; } } /* --- Page : participer --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .pass-intro { background: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .pass-intro .pf-crumb { margin-bottom: 26px; } .pass-intro .pf-eyebrow { margin-bottom: 20px; } .pass-intro h1 { font-weight: 500; font-size: clamp(44px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--ink); max-width: 16ch; } .pass-intro__lead { font-size: 25px; line-height: 1.4; color: var(--ink-soft); max-width: 56ch; margin: 0; } /* ─── Modes de participation ─────────────────────────────────── */ .modes { padding: 90px 0 40px; } .modes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .mode { display: flex; flex-direction: column; padding: 38px 34px 36px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); } .mode__icon { width: 36px; height: 36px; color: var(--primary); margin-bottom: 20px; } .mode__icon svg { width: 100%; height: 100%; } .mode h3 { font-weight: 500; font-size: 26px; margin: 0 0 12px; color: var(--ink); line-height: 1.1; } .mode p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; } /* ─── Choisir un lieu (renvoi) ───────────────────────────────── */ .choose { padding: 70px 0 96px; } .choose__head { margin-bottom: 44px; max-width: 640px; } .choose__head .pf-eyebrow { margin-bottom: 20px; } .choose__head p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 16px 0 0; } .choose__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .place-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .place-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -32px rgba(20,17,50,.4); } .place-card__img { width: 100%; height: 200px; display: block; position: relative; } .place-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; } .place-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; } .place-card__date { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 10px; } .place-card__city { font-weight: 500; font-size: 30px; margin: 0 0 8px; color: var(--ink); line-height: 1; } .place-card__desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; flex: 1; } .place-card__go { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .place-card__go .arrow { transition: transform .2s; } .place-card:hover .place-card__go .arrow { transform: translateX(4px); } /* ─── Bandeau FAQ ────────────────────────────────────────────── */ .pass-faq { padding: 90px 48px; background: var(--primary-wash); text-align: center; } .pass-faq__inner { max-width: 600px; margin: 0 auto; } .pass-faq .pf-eyebrow { justify-content: center; margin-bottom: 20px; } .pass-faq h2 { margin-bottom: 14px; } .pass-faq p { color: var(--ink-soft); font-size: 16px; margin: 0 0 28px; } @media (max-width: 900px) { .modes__grid { grid-template-columns: 1fr; } .choose__grid { grid-template-columns: 1fr; } } /* --- Page : aider --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .pass-intro { background: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .pass-intro .pf-crumb { margin-bottom: 26px; } .pass-intro .pf-eyebrow { margin-bottom: 20px; } .pass-intro h1 { font-weight: 500; font-size: clamp(44px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--ink); max-width: 16ch; } .pass-intro__lead { font-size: 25px; line-height: 1.4; color: var(--ink-soft); max-width: 56ch; margin: 0; } /* ─── Modes de participation ─────────────────────────────────── */ .modes { padding: 90px 0 40px; } .modes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .mode { display: flex; flex-direction: column; padding: 38px 34px 36px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); } .mode__icon { width: 36px; height: 36px; color: var(--primary); margin-bottom: 20px; } .mode__icon svg { width: 100%; height: 100%; } .mode h3 { font-weight: 500; font-size: 26px; margin: 0 0 12px; color: var(--ink); line-height: 1.1; } .mode p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; } a.mode { text-decoration: none; } /* ─── Choisir un lieu (renvoi) ───────────────────────────────── */ .choose { padding: 70px 0 96px; } .choose__head { margin-bottom: 44px; max-width: 640px; } .choose__head .pf-eyebrow { margin-bottom: 20px; } .choose__head p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 16px 0 0; } .choose__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .place-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .place-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -32px rgba(20,17,50,.4); } .place-card__img { width: 100%; height: 200px; display: block; position: relative; } .place-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; } .place-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; } .place-card__date { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-deep); margin-bottom: 10px; } .place-card__city { font-weight: 500; font-size: 30px; margin: 0 0 8px; color: var(--ink); line-height: 1; } .place-card__desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; flex: 1; } .place-card__go { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .place-card__go .arrow { transition: transform .2s; } .place-card:hover .place-card__go .arrow { transform: translateX(4px); } /* ─── Bandeau FAQ ────────────────────────────────────────────── */ .pass-faq { padding: 90px 48px; background: var(--primary-wash); text-align: center; } .pass-faq__inner { max-width: 600px; margin: 0 auto; } .pass-faq .pf-eyebrow { justify-content: center; margin-bottom: 20px; } .pass-faq h2 { margin-bottom: 14px; } .pass-faq p { color: var(--ink-soft); font-size: 16px; margin: 0 0 28px; } @media (max-width: 900px) { .modes__grid { grid-template-columns: 1fr; } .choose__grid { grid-template-columns: 1fr; } } /* --- Page : presse --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .pr-intro { background: var(--ink); color: #fff; padding: 56px 0 64px; } .pr-intro .pf-crumb { margin-bottom: 26px; } .pr-intro .pf-eyebrow { margin-bottom: 20px; } .pr-intro h1 { font-weight: 500; /* font-size: clamp(44px, 6vw, 80px);*/ font-size: clamp(34px, 10vw, 80px); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 20px; } .pr-intro p.lead { font-size: 22px; line-height: 1.4; color: rgba(255,255,255,.85); max-width: 54ch; margin: 0; } /* ─── Accès rapides ──────────────────────────────────────────── */ .pr-quick { padding: 72px 0 40px; } .pr-quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pr-tile { display: flex; flex-direction: column; padding: 34px 32px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .pr-tile:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -32px rgba(20,17,50,.4); } .pr-tile__icon { width: 32px; height: 32px; color: var(--primary); margin-bottom: 18px; } .pr-tile__icon svg { width: 100%; height: 100%; } .pr-tile h3 { font-weight: 500; font-size: 24px; margin: 0 0 8px; color: var(--ink); } .pr-tile p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; flex: 1; } .pr-tile__go { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .pr-tile__go .arrow { transition: transform .2s; } .pr-tile:hover .pr-tile__go .arrow { transform: translateX(4px); } /* ─── Communiqués ────────────────────────────────────────────── */ .pr-releases { padding: 60px 0 90px; } .pr-releases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; } .pr-releases__head .pf-eyebrow { margin-bottom: 18px; } .pr-list { border-top: 1px solid var(--rule); } .pr-item { display: grid; /* grid-template-columns: 130px 1fr auto;*/ grid-template-columns: 130px 1fr 150px; gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background .15s; } .pr-item:hover { background: var(--cream); } .pr-item__date { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-mute); } .pr-item__title { font-weight: 500; font-size: 23px; color: var(--ink); line-height: 1.15; } .pr-item__dl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-deep); white-space: nowrap; } .pr-item__dl svg { width: 15px; height: 15px; } .pr-item__dl .gb-text { text-wrap: auto; } /* ─── Kit média ──────────────────────────────────────────────── */ .pr-kit { padding: 90px 0; background: var(--cream); } .pr-kit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .pr-kit__text .pf-eyebrow { margin-bottom: 20px; } .pr-kit__text h2 { margin-bottom: 18px; } .pr-kit__text p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 24px; max-width: 48ch; } .pr-kit__list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pr-kit__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); } .pr-kit__list svg { width: 18px; height: 18px; color: var(--primary); flex: none; } .pr-kit__visual img { width: 100%; height: 420px; border-radius: 8px; overflow: hidden; display: block; box-shadow: 0 30px 60px -34px rgba(20,17,50,.45); } /* ─── Contact presse ─────────────────────────────────────────── */ .pr-contact { padding: 90px 48px; text-align: center; } .pr-contact__inner { max-width: 600px; margin: 0 auto; } .pr-contact .pf-eyebrow { justify-content: center; margin-bottom: 20px; } .pr-contact h2 { margin-bottom: 14px; } .pr-contact p { color: var(--ink-soft); font-size: 16px; margin: 0 0 12px; } .pr-contact a.mail { font-size: 28px; color: var(--primary-deep); text-decoration: none; border-bottom: 1px solid var(--primary-soft); } .pr-contact a.mail:hover { color: var(--ink); } .pr-contact .tbl-contactspresse td:nth-of-type(odd) { width: 40%; } .pr-contact .tbl-contactspresse td:nth-of-type(even) { width: 60%; } .pr-contact .tbl-contactspresse td:nth-of-type(even) a { font-size: 21px; color: var(--primary-deep); text-decoration: none; border-bottom: 1px solid var(--primary-soft); } .pr-contact .tbl-contactspresse td:nth-of-type(even) a:hover { color: var(--ink); } @media (max-width: 900px) { .pr-quick__grid { grid-template-columns: 1fr; } .pr-item { grid-template-columns: 1fr; gap: 6px; } .pr-item__dl { justify-self: start; } .pr-kit__grid { grid-template-columns: 1fr; gap: 36px; } } /* ─── Filtres de section (assets/js/pf-filtres.js) ────────────────── Le script pose hidden sur les sections qui ne correspondent pas au filtre choisi. hidden ne vaut display:none que dans la feuille du NAVIGATEUR, la moins prioritaire : le moindre display d'auteur sur une de ces sections le battrait, et la section resterait affichée sans que rien ne le signale. Même famille de piège que la façade uMap. La règle est ici une fois pour toutes, plutôt qu'au cas par cas dans chaque page à filtres. */ [data-pf-cat][hidden] { display: none; } /* --- Page : multimedia --- */ /* ─── Intro ───────────────────────────────────────────────────── */ .mm-intro { background: var(--cream); padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .mm-intro .pf-crumb { margin-bottom: 26px; } .mm-intro .pf-eyebrow { margin-bottom: 20px; } .mm-intro h1 { font-weight: 500; font-size: clamp(44px, 6vw, 78px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .mm-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; } .mm-tab { font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); text-decoration: none; transition: all .2s; cursor: pointer; } .mm-tab:hover { border-color: var(--primary-soft); color: var(--primary-deep); } .mm-tab.is-active, .mm-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Les onglets sont des