/* ============================================================ SORTIE DE BUNKER — Feuille de style principale Golf & Art de Vivre ============================================================ */ :root { --cream: #c7a067; --ivory: #faf8f4; --dark: #111008; --charcoal: #2a2820; --moss: #3d4a2e; --gold: #dbab1c; --gold-lt: #d4b86a; --warm-mid: #6b6456; --rule: #d5cec0; /* ── Typographie globale (injectées dynamiquement depuis la DB) ── */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-body: 'Barlow', sans-serif; --font-cond: 'Barlow Condensed', sans-serif; --fs-h1: clamp(2.4rem, 5vw, 4rem); --fs-h2: clamp(1.8rem, 3.5vw, 2.8rem); --fs-h3: clamp(1.3rem, 2.5vw, 1.8rem); --fs-eyebrow: .7rem; --fs-subtitle: .95rem; --fs-body: 0.95rem; --fw-heading: 300; --lh-heading: 1.12; /* ── Couleurs de texte (injectées dynamiquement depuis la DB) ── */ --c-eyebrow: var(--gold); --c-title: var(--dark); --c-subtitle: var(--warm-mid); --c-body: var(--charcoal); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { background-color: #fff; color: var(--c-body, var(--charcoal)); font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.7; } a { color: var(--c-link, #b8993a); } a:hover { color: var(--c-link-hover, #8a6e22); } /* ─── TYPOGRAPHIE ─────────────────────────────────────────── */ h1,h2,h3,h4,h5 { font-family: var(--font-serif); font-weight: var(--fw-heading); line-height: var(--lh-heading); color: var(--c-title, var(--dark)); } /* Corps de texte des pages de contenu (articles, vidéos, éditions) — piloté par les réglages "Tailles & graisses" / "Couleurs" de admin/typography.php */ .article-body { font-size: var(--fs-body, .95rem); color: var(--c-body, var(--charcoal)); } .article-body .ql-img-float-left { float: left; margin: .3rem 1.5rem 1.2rem 0; max-width: 45%; } .article-body .ql-img-float-right { float: right; margin: .3rem 0 1.2rem 1.5rem; max-width: 45%; } .article-body .ql-img-float-left img, .article-body .ql-img-float-right img { display: block; max-width: 100%; height: auto; } @media (max-width: 600px) { .article-body .ql-img-float-left, .article-body .ql-img-float-right { float: none; max-width: 100%; margin: 0 0 1rem; } } /* Classes communes utilisées dans toutes les sections */ .sec-eyebrow { font-family: var(--font-cond); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-eyebrow, var(--gold)); margin: 0 0 .6rem; } .sec-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: var(--fw-heading); line-height: var(--lh-heading); color: var(--c-title, var(--dark)); margin: 0 0 .75rem; } .sec-subtitle { font-size: var(--fs-subtitle); line-height: 1.6; color: var(--c-subtitle, var(--warm-mid)); margin: 0 0 1.5rem; } .label { font-family: var(--font-cond); font-size: var(--fs-eyebrow, 10px); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-eyebrow, var(--gold)); } /* ─── NAVBAR ─────────────────────────────────────────────── */ /* Les variables --nav-* sont injectées dynamiquement dans par includes/header.php */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--nav-bg, var(--dark)); border-bottom: var(--nav-border-bottom, 1px solid rgba(184,153,58,.3)); height: var(--nav-height, 64px); transition: box-shadow .3s; } /* Sticky : efface left/right hérités de la règle fixed ci-dessus, sinon position:sticky se comporte comme position:fixed (bug) */ #navbar.sticky { position: sticky; top: 0; left: auto; right: auto; z-index: 1030; } body:not(.has-sticky-nav) { padding-top: var(--nav-height, 64px); } body.has-sticky-nav { padding-top: 0; } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr auto; grid-template-areas: "left logo right ham"; align-items: center; height: 100%; padding: 0 2rem; gap: 1rem; } /* Zones CSS */ .nav-links-wrap { grid-area: left; } .nav-logo { grid-area: logo; justify-self: center; } .nav-right { grid-area: right; justify-self: end; } .hamburger { grid-area: ham; } /* Logo à gauche */ #navbar.logo-left .nav-inner { grid-template-columns: auto 1fr auto auto; grid-template-areas: "logo left right ham"; } #navbar.logo-left .nav-logo { justify-self: start; } /* Logo à droite */ #navbar.logo-right .nav-inner { grid-template-columns: 1fr auto auto auto; grid-template-areas: "left right logo ham"; } #navbar.logo-right .nav-logo { justify-self: end; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } /* Dropdowns */ .nav-links li { position: relative; } .nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; background: var(--nav-bg, var(--dark)); border: 1px solid rgba(255,255,255,.08); list-style: none; margin: 0; padding: .4rem 0; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .nav-dropdown li a { display: block; padding: .45rem 1.2rem; font-size: var(--nav-font-size, .8rem); letter-spacing: var(--nav-spacing, .08em); } .nav-links li.has-dropdown:hover > .nav-dropdown { display: block; } /* Pont invisible sur le gap entre le lien et le dropdown */ .nav-links li.has-dropdown::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; /* couvre le gap de 8px + marge */ z-index: 199; } .nav-links a { font-family: var(--nav-font, 'Barlow Condensed', sans-serif); font-size: var(--nav-font-size, 0.8rem); font-weight: var(--nav-font-weight, 400); letter-spacing: var(--nav-spacing, 0.12em); text-transform: var(--nav-transform, uppercase); color: var(--nav-link, var(--cream)); text-decoration: none; position: relative; transition: color .2s; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--nav-link-hover, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .nav-links a:hover { color: var(--nav-link-hover, var(--gold)); } .nav-links a:hover::after { transform: scaleX(1); } .nav-logo { text-align: center; } .nav-logo-img-link { display: inline-block; line-height: 0; } .nav-logo-img { max-height: calc(var(--nav-height, 64px) * 0.65); max-width: 250px; width: auto; object-fit: contain; } .nav-logo-text { font-family: var(--nav-logo-font, 'Cormorant Garamond', serif); font-size: var(--nav-logo-size, 1.25rem); font-weight: var(--nav-logo-weight, 600); letter-spacing: .12em; text-transform: uppercase; color: var(--nav-logo-color, var(--cream)); text-decoration: none; display: block; line-height: 1; } .nav-logo-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--nav-tagline-color, var(--gold)); } .nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; } .nav-right .nav-links a { color: var(--nav-link, var(--cream)); } .nav-right .nav-links a:hover { color: var(--nav-link-hover, var(--gold)); } .nav-social-link { color: var(--nav-link, var(--cream)); text-decoration: none; font-size: 14px; transition: color .2s; opacity: .75; } .nav-social-link:hover { color: var(--nav-link-hover, var(--gold)); opacity: 1; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; border: none; background: none; padding: 4px; } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--charcoal); transition: all .3s; } /* Nav mobile */ #mobile-nav { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--nav-bg); z-index: 999; padding: 2rem; flex-direction: column; gap: 0.1rem; overflow-y: auto; height: 55%; } #mobile-nav.open { display: flex; } #mobile-nav a { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--dark); text-decoration: none; text-transform: var(--nav-transform, uppercase); border-bottom: 1px solid var(--rule); padding-bottom: .8rem; } #mobile-nav a:hover { color: var(--gold); } /* ─── HERO / CAROUSEL ─────────────────────────────────────── */ .hero-carousel-wrap { margin-top: var(--nav-height, 64px); position: relative; } body.has-sticky-nav .hero-carousel-wrap { margin-top: 0; } .hero-carousel-wrap .carousel-item { min-height: 92vh; position: relative; overflow: hidden; } .carousel-img-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 8s ease; transform: scale(1); } /* ─── Transitions paramétrables ───────────────────────────── Variables injectées en inline sur #heroCarousel-* : --carousel-speed (durée glissement/fondu) · --kb-scale (zoom Ken Burns) */ /* Vitesse glissement & fondu */ .hero-carousel-wrap .carousel-item { transition: transform var(--carousel-speed, .6s) ease-in-out; } .hero-carousel-wrap.carousel-fade .carousel-item, .carousel-fade .carousel-item { transition: opacity var(--carousel-speed, .6s) ease-in-out; } .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: opacity 0s var(--carousel-speed, .6s); } /* Effet Ken Burns (zoom lent sur la slide active) */ .carousel-fx-kenburns .carousel-item.active .carousel-img-bg { transform: scale(var(--kb-scale, 1.12)); } /* Effet Zoom cinématique : l'image entre en gros plan puis se pose */ .carousel-fx-zoom .carousel-item.active .carousel-img-bg { animation: cxZoomIn 1.3s ease-out; } @keyframes cxZoomIn { from { transform: scale(1.28); } to { transform: scale(1); } } /* Effet Flou : la slide entrante se précise en fondu */ .carousel-fx-blur .carousel-item .carousel-img-bg { filter: blur(0); } .carousel-fx-blur .carousel-item:not(.active) .carousel-img-bg { filter: blur(16px); transform: scale(1.06); } .carousel-fx-blur .carousel-item.active .carousel-img-bg { filter: blur(0); transition: transform 8s ease, filter var(--carousel-speed, .6s) ease-out; } /* Glissement vertical */ .carousel-fx-vertical .carousel-item-next:not(.carousel-item-start), .carousel-fx-vertical .active.carousel-item-end { transform: translateY(100%); } .carousel-fx-vertical .carousel-item-prev:not(.carousel-item-end), .carousel-fx-vertical .active.carousel-item-start { transform: translateY(-100%); } /* Cacher les éléments animés avant que l'animation démarre */ .car-anim-el { opacity: 0; } @media (prefers-reduced-motion: reduce) { .car-anim-el { opacity: 1 !important; animation: none !important; } .carousel-img-bg, .hero-carousel-wrap .carousel-item { transition: none !important; } .carousel-fx-zoom .carousel-item.active .carousel-img-bg, .carousel-fx-kenburns .carousel-item.active .carousel-img-bg { animation: none !important; transform: none !important; } } .carousel-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(17,16,8,.75) 0%, rgba(17,16,8,.2) 60%, transparent 100%); } .carousel-caption-custom { position: absolute; inset: 0; padding: 5rem 4rem; display: flex; align-items: center; justify-content: center; } .carousel-caption-content { max-width: 540px; } .carousel-issue { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .carousel-caption-custom h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream); margin-bottom: 1rem; } .carousel-caption-custom p { font-size: .88rem; color: rgba(245,240,232,.75); line-height: 1.8; margin-bottom: 2rem; } .btn-primary-sdb { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 4px; transition: color .2s, border-color .2s; } .btn-primary-sdb:hover { color: var(--gold); } .btn-primary-sdb i { font-size: 12px; transition: transform .3s; } .btn-primary-sdb:hover i { transform: translateX(4px); } /* Contrôles carousel */ .carousel-control-prev, .carousel-control-next { width: 50px; opacity: 0; transition: opacity .3s; } .hero-carousel-wrap:hover .carousel-control-prev, .hero-carousel-wrap:hover .carousel-control-next { opacity: 1; } .carousel-indicators button { width: 24px; height: 2px; background: rgba(255,255,255,.4); } .carousel-indicators button.active { background: var(--gold); width: 40px; } /* ─── TICKER ─────────────────────────────────────────────── */ .ticker-wrap { background: var(--moss); overflow: hidden; padding: .55rem 0; } .ticker { display: flex; gap: 4rem; animation: ticker 30s linear infinite; white-space: nowrap; width: max-content; } .ticker span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); } .ticker .sep { color: var(--gold-lt); } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── SECTIONS ────────────────────────────────────────────── */ section { padding: 0rem 0; } .section-rule { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; } .section-rule::before, .section-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .section-rule::before { flex: 0 0 40px; } .section-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: center; margin: 0; } /* ─── MAGAZINE GRID (landing) ─────────────────────────────── */ #magazine { background: var(--cream); } /* mag-grid supprimé — remplacé par .blog-card */ .card-link { margin-top: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--moss); padding-bottom: 2px; align-self: flex-start; transition: color .2s, border-color .2s; } .card-link:hover { color: var(--gold); border-color: var(--gold); } /* ─── ABOUT STRIP ────────────────────────────────────────── */ #about { background: var(--dark); color: var(--cream); padding: 6rem 0; position: relative; overflow: hidden; } #about::before { content: 'GOLF'; position: absolute; top: 50%; left: -2rem; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; font-size: 14rem; font-weight: 300; color: rgba(255,255,255,.03); pointer-events: none; white-space: nowrap; line-height: 1; } .about-inner { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 4rem; align-items: center; } .about-divider { background: var(--gold); height: 120px; align-self: center; } .about-title { font-size: var(--fs-h2, clamp(2rem, 4vw, 3.2rem)); color: var(--cream); margin-bottom: 1.5rem; } .about-title em { color: var(--gold-lt); } .about-text { font-size: .88rem; color: #a09880; line-height: 1.9; margin-bottom: 2rem; } .about-stats { display: flex; gap: 2.5rem; } .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--gold-lt); line-height: 1; } .stat-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #756c5a; margin-top: .2rem; } /* ─── BLOG GRID ──────────────────────────────────────────── */ .blog-card { background: var(--ivory); border: 1px solid var(--rule); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; } .blog-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.07); transform: translateY(-3px); } .blog-card-img { overflow: hidden; aspect-ratio: 16/9; } .blog-card-img--portrait { aspect-ratio: 4/5; } .blog-card--featured .blog-card-img { aspect-ratio: 4/3; } .blog-card--hero-wide .blog-card-img { aspect-ratio: 21/9; } /* ── Grille articles magazine (3 col) ───────────────── */ .ag-magazine-grid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; height: 580px; } .ag-mag-col { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 6px; } .ag-mag-small { height: 100%; } .ag-mag-main { height: 100%; } .ag-mag-title { font-size: 1.4rem !important; line-height: 1.25; } @media (max-width: 991px) { .ag-magazine-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; } .ag-mag-main { aspect-ratio: 4/3; grid-column: 1 / -1; order: -1; } .ag-mag-col { grid-template-rows: auto; } .ag-mag-small { aspect-ratio: 16/9; } } @media (max-width: 575px) { .ag-magazine-grid { grid-template-columns: 1fr; } .ag-mag-main { grid-column: 1; } } /* ── Grille articles overlay ─────────────────────────── */ .ag-overlay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ag-card--main { aspect-ratio: 4/5; } .ag-grid-right { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; } .ag-card--small { height: 100%; } .ag-card { position: relative; display: block; overflow: hidden; border-radius: 8px; text-decoration: none; color: #fff; } .ag-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .ag-card:hover img { transform: scale(1.05); } .ag-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; } .ag-badge { display: inline-block; background: var(--gold, #b8993a); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 3px; margin-bottom: .5rem; width: fit-content; } .ag-section-accroche { font-size: clamp(.9rem, 1.5vw, 1.05rem); color: var(--c-subtitle, var(--warm-mid)); line-height: 1.6; margin: .4rem 0 0; } .ag-card-title { font-family: var(--font-serif, Georgia, serif); font-size: 1.1rem; line-height: 1.35; margin: 0 0 .4rem; color: #fff; } .ag-card-excerpt { font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.82); margin: .3rem 0 .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ag-card-meta { font-size: .75rem; opacity: .75; margin: 0; display: flex; align-items: center; gap: .4rem; color: #fff; } @media (max-width: 767px) { .ag-overlay-grid { grid-template-columns: 1fr; } .ag-card--main { aspect-ratio: 16/9; } .ag-grid-right { grid-template-columns: 1fr 1fr; height: auto; } .ag-card--small { aspect-ratio: 4/5; height: auto; } } /* ── Template Journal ── */ .ag-journal-grid { display: grid; grid-template-columns: 1fr 1.8fr 1.2fr; gap: 6px; height: 580px; } .ag-journal-left { display: flex; flex-direction: column; gap: 6px; } .ag-journal-left .ag-card { flex: 1; } .ag-journal-main { height: 100%; } .ag-journal-right { display: flex; flex-direction: column; background: var(--light, #f8f9fa); padding: 8px 14px; overflow-y: auto; } .ag-journal-item { display: flex; flex-direction: column; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.1); text-decoration: none; color: inherit; } .ag-journal-item:last-child { border-bottom: none; } .ag-journal-item-cat { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; } .ag-journal-item-title { font-size: .9rem; font-weight: 600; color: var(--c-title, var(--dark)); line-height: 1.35; margin: 4px 0 3px; } .ag-journal-item-meta { font-size: .72rem; color: #888; } .ag-journal-item:hover .ag-journal-item-title { color: var(--primary); } @media (max-width: 991px) { .ag-journal-grid { grid-template-columns: 1fr 1.4fr; height: auto; } .ag-journal-right { display: none; } } @media (max-width: 575px) { .ag-journal-grid { grid-template-columns: 1fr; height: auto; } .ag-journal-left .ag-card { aspect-ratio: 16/9; } .ag-journal-main { aspect-ratio: 16/9; } } /* ── Template Mixte ── */ /* ── Template Mixte (50/50 : image gauche | contenu droite) ── */ .ag-mag3-outer { overflow-x: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; } .ag-mag3 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - var(--nav-height, 64px)); overflow: hidden; width: 100%; } .ag-mag3-image { position: relative; display: block; overflow: hidden; text-decoration: none; } .ag-mag3-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .ag-mag3:hover .ag-mag3-image img { transform: scale(1.04); } .ag-mag3-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 2.8rem; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 45%, transparent 100%); gap: .85rem; } .ag-mag3-eyebrow { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); } .ag-mag3-accroche { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.5; color: rgba(245,240,232,.82); margin: 0; } .ag-mag3-title { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: clamp(2.4rem, 4.2vw, 5.2rem); font-weight: 700; line-height: 1.0; letter-spacing: -.01em; color: #fff; text-decoration: none; display: block; transition: color .2s; } .ag-mag3-title:hover { color: var(--gold); } .ag-mag3-body { font-size: .85rem; line-height: 1.75; color: rgba(245,240,232,.72); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ag-mag3-right { display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--rule); } .ag-mag3-sommaire-head { padding: 1.6rem 2.2rem .8rem; font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .65rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--dark, #111008); border-bottom: 2px solid var(--dark, #111008); flex-shrink: 0; } .ag-mag3-index { padding: 0 2.2rem 1.5rem; overflow-y: auto; flex: 1; min-height: 0; } .ag-mag3-section-label { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dark, #111008); margin: 1.2rem 0 .5rem; padding-bottom: .4rem; border-bottom: 2px solid var(--dark, #111008); } .ag-mag3-section-label:first-child { margin-top: 0; } .ag-mag3-item { display: grid; grid-template-columns: 2.4rem 56px 1fr; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid #f0ede7; text-decoration: none; color: inherit; align-items: center; } .ag-mag3-item-thumb { width: 56px; height: 42px; object-fit: cover; display: block; flex-shrink: 0; } .ag-mag3-item:last-child { border-bottom: none; } .ag-mag3-num { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 1.35rem; font-weight: 700; color: var(--gold); line-height: 1; padding-top: .05rem; } .ag-mag3-item-title { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dark, #111008); line-height: 1.3; margin-bottom: .15rem; } .ag-mag3-item-desc { font-size: .74rem; color: var(--c-subtitle, #6b6456); line-height: 1.45; } .ag-mag3-item:hover .ag-mag3-item-title { color: var(--gold); } @media (max-width: 900px) { .ag-mag3 { grid-template-columns: 1fr; } .ag-mag3-image { aspect-ratio: 16/9; position: relative; min-height: 260px; } .ag-mag3-right { border-left: none; border-top: 1px solid var(--rule); } .ag-mag3-text { border-bottom: 1px solid var(--rule); } } /* ── Template Quatuor (grille 2×2, images overlay) ── */ .ag-quat-outer { overflow-x: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; } .ag-quat-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 50vh; width: 100%; } .ag-quat-card { position: relative; display: block; overflow: hidden; text-decoration: none; animation: dip-in .7s ease both; } .ag-quat-grid .ag-quat-card:nth-child(2) { animation-delay: .1s; } .ag-quat-grid .ag-quat-card:nth-child(3) { animation-delay: .18s; } .ag-quat-grid .ag-quat-card:nth-child(4) { animation-delay: .26s; } .ag-quat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .ag-quat-card:hover img { transform: scale(1.04); } .ag-quat-card .ag-dip-overlay { padding: 1.4rem 1.6rem; } .ag-quat-card .ag-dip-title { order: 1; font-size: clamp(1.1rem, 1.8vw, 2rem); } .ag-quat-card .ag-dip-accroche { order: 2; font-size: clamp(1rem, 1.4vw, 1.3rem); } .ag-quat-card .ag-dip-eyebrow { order: 3; margin-top: auto; align-self: flex-end; } @media (max-width: 768px) { .ag-quat-grid { grid-template-columns: 1fr; grid-auto-rows: 70vh; } } /* ── Template Octet (grille 4×2, slider horizontal) ── */ .ag-oct-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; } .ag-oct-outer { overflow-x: hidden; width: 100%; } .ag-oct-slider { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; } .ag-oct-slide { flex-shrink: 0; width: 100%; } .ag-oct-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50vh; width: 100%; } .ag-oct-card { position: relative; display: block; overflow: hidden; text-decoration: none; animation: dip-in .7s ease both; } .ag-oct-grid .ag-oct-card:nth-child(2) { animation-delay: .07s; } .ag-oct-grid .ag-oct-card:nth-child(3) { animation-delay: .13s; } .ag-oct-grid .ag-oct-card:nth-child(4) { animation-delay: .19s; } .ag-oct-grid .ag-oct-card:nth-child(5) { animation-delay: .25s; } .ag-oct-grid .ag-oct-card:nth-child(6) { animation-delay: .31s; } .ag-oct-grid .ag-oct-card:nth-child(7) { animation-delay: .37s; } .ag-oct-grid .ag-oct-card:nth-child(8) { animation-delay: .43s; } .ag-oct-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .ag-oct-card:hover img { transform: scale(1.05); } .ag-oct-card .ag-dip-overlay { padding: 1rem 1.2rem; } .ag-oct-card .ag-dip-title { order: 1; font-size: clamp(2.2rem, 1.3vw, 1.5rem); } .ag-oct-card .ag-dip-accroche { order: 2; font-size: clamp(.95rem, 1.2vw, 1.15rem); } .ag-oct-card .ag-dip-eyebrow { order: 3; margin-top: auto; align-self: flex-end; } @media (max-width: 900px) { .ag-oct-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 50vh; } } @media (max-width: 768px) { .ag-oct-grid { grid-template-columns: 1fr; grid-auto-rows: 70vh; } } .ag-oct-nav { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; z-index: 30; background: rgba(0,0,0,.52); backdrop-filter: blur(8px); padding: .55rem 1.4rem; border-radius: 2rem; } .ag-oct-nav .pag-chev-btn { font-size: 1.3rem; } @media (max-width: 768px) { .ag-oct-grid { grid-template-columns: 1fr; grid-auto-rows: 70vh; } } /* ── Template Diptyque (grille 2 col, images overlay) ── */ .ag-dip-outer { overflow-x: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; } .ag-dip-slider { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; } .ag-dip-slide { flex-shrink: 0; width: 100%; } .ag-quat-slider { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; } .ag-quat-slide { flex-shrink: 0; width: 100%; } .ag-dip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; } @keyframes dip-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .ag-dip-card { position: relative; display: block; overflow: hidden; text-decoration: none; height: calc(100vh - var(--nav-height, 64px)); animation: dip-in .7s ease both; } .ag-dip-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .ag-dip-card:hover img { transform: scale(1.04); } .ag-dip-grid .ag-dip-card:nth-child(2) { animation-delay: .12s; } .ag-dip-grid .ag-dip-card:nth-child(3) { animation-delay: .22s; } .ag-dip-grid .ag-dip-card:nth-child(4) { animation-delay: .32s; } .ag-dip-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 2.5rem 2.8rem; background: linear-gradient(to bottom, rgba(0,0,0,.80) 0%, rgba(0,0,0,.35) 50%, transparent 100%); gap: .85rem; transition: background .4s ease; } .ag-dip-card:hover .ag-dip-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, transparent 100%); } .ag-dip-eyebrow { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); } .ag-dip-accroche { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; color: rgba(245,240,232,.82); margin: 0; } .ag-dip-title { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: clamp(2.2rem, 3.8vw, 4.5rem); font-weight: 700; line-height: 1.0; letter-spacing: -.01em; color: #fff; } @media (max-width: 768px) { .ag-dip-grid { grid-template-columns: 1fr; } .ag-dip-card { height: 70vh; } } /* ── Template Mosaïque ── */ .ag-mosaic-group { display: flex; flex-direction: column; gap: 6px; } .ag-mosaic-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ag-mosaic-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .ag-mosaic-card { position: relative; display: block; overflow: hidden; border-radius: 6px; text-decoration: none; color: inherit; } .ag-mosaic-row-2 .ag-mosaic-card { aspect-ratio: 16/9; } .ag-mosaic-row-3 .ag-mosaic-card { aspect-ratio: 4/3; } .ag-mosaic-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .ag-mosaic-card:hover img { transform: scale(1.04); } .ag-mosaic-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 35%, rgba(0,0,0,.72) 100%); pointer-events: none; } .ag-mosaic-top { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.9); font-size: .74rem; font-family: var(--font-body, 'Barlow', sans-serif); } .ag-mosaic-avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; flex-shrink: 0; border: 1px solid rgba(255,255,255,.3); } .ag-mosaic-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 14px 14px 12px; } .ag-mosaic-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 5px; line-height: 1.3; font-family: var(--font-serif, 'Cormorant Garamond', serif); } .ag-mosaic-title--sm { font-size: 1.5rem; } .ag-mosaic-meta { font-size: 0.75rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .25rem; } .ag-mosaic-cat { color: var(--primary, #b8993a); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; } @media (max-width: 767px) { .ag-mosaic-row-2 { grid-template-columns: 1fr; } .ag-mosaic-row-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ag-mosaic-row-3 { grid-template-columns: 1fr; } } /* ── Template Accordéon (cards expandables) ── */ .ag-acc { display: grid; transform: translate3d(0,0,.1px); overflow: hidden; } .ag-acc__nav { padding: .75rem 1rem; justify-self: end; grid-row: 1; display: flex; justify-content: flex-end; gap: .75rem; } .ag-acc__btn { display: flex; align-items: center; gap: .4rem; padding: .45rem 1.2rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--cream, #f5f0e8); font-family: var(--font-cond, sans-serif); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border-radius: 4px; transition: background .2s, border-color .2s; } .ag-acc__btn:hover { background: rgba(255,255,255,.16); border-color: var(--gold,.7); } .ag-acc__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .ag-acc__list { display: flex; overflow: hidden; list-style: none; padding: .5rem 0 2rem; margin: 0; contain: layout; isolation: isolate; } .ag-acc__item { display: grid; position: relative; align-content: start; margin: 0 8px; padding: 0; flex: 1 1 10%; height: calc(58vh - 50px); overflow: hidden; background: rgba(10,9,0,.6); border-radius: 12px; transform: translate3d(0,0,.1px); box-shadow: rgba(0,0,0,.45) 0 3px 15px 2px, rgba(0,0,0,.25) 0 12px 28px 0, rgba(0,0,0,.1) 0 2px 4px 0, rgba(255,255,255,.04) 0 0 0 1px inset; contain: layout; isolation: isolate; cursor: pointer; outline: none; } .ag-acc__item, .ag-acc__item * { transition: all .6s cubic-bezier(.55,.24,.18,1); user-select: none; } .ag-acc__item:hover { flex-basis: calc(420px / 2); transition: all .3s ease; } .ag-acc__item[data-active] { flex-basis: 420px; flex-grow: 0; } /* overlay gradient: dark to gold tones */ .ag-acc__item::after { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 1; background: linear-gradient(160deg, rgba(2,0,36,0) 40%, rgba(201,168,76,.45) 72%, rgba(180,140,30,.55) 100%); transition: all .66s cubic-bezier(.55,.24,.18,1); } .ag-acc__item[data-active]::after { transform: translateY(100%); } .ag-acc__item img { display: block; position: absolute; width: 420px; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; object-fit: cover; filter: saturate(.25) contrast(.75) brightness(1.1); } .ag-acc__item[data-active] img, .ag-acc__item[data-active] * { opacity: 1; filter: none; } /* contents panel */ .ag-acc__contents { display: flex; flex-direction: column-reverse; justify-content: start; min-height: 180px; width: 420px; padding: 1.1rem 1.25rem; z-index: 2; background-image: radial-gradient(ellipse at 0 0, rgba(0,0,0,.45) 20%, transparent 55%); background-size: 170% 200px; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .ag-acc__title { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 1.65rem; font-weight: 600; line-height: 1.15; color: var(--cream, #f5f0e8); text-shadow: 0 1px 3px rgba(0,0,0,.4); margin: 0; max-width: 18em; opacity: 0; transform: translateX(-200px); transition-duration: 1s; } .ag-acc__title a { color: inherit; text-decoration: none; } .ag-acc__title a:hover { text-decoration: underline; } .ag-acc__cat { font-family: var(--font-cond, sans-serif); font-size: .78rem; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; color: transparent; background: linear-gradient(270deg, var(--gold, #c9a84c), #e8d5a0); background-clip: text; -webkit-background-clip: text; opacity: 0; transform: translateX(-200px); transition-duration: 1s; margin: 0 0 .4em; max-width: 18em; } .ag-acc__item[data-active] .ag-acc__title, .ag-acc__item[data-active] .ag-acc__cat { transform: translateX(0); opacity: 1; } .ag-acc__item[data-active] .ag-acc__title { transition-delay: .1s; } .ag-acc__item[data-active] .ag-acc__cat { opacity: .9; transition-delay: .05s; } .ag-acc__item[data-active] .ag-acc__read { opacity: 1; transform: translateY(0); transition-delay: .2s; } .ag-acc__footer { position: absolute; bottom: 1.5rem; left: 0; right: 0; display: flex; justify-content: center; z-index: 3; } .ag-acc__read { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.4rem; background: #000; color: #fff; border: none; font-family: var(--font-cond, sans-serif); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 3px; opacity: 0; transform: translateY(20px); transition: all .6s cubic-bezier(.55,.24,.18,1), background .2s; } .ag-acc__read:hover { background: #222; color: #fff; } /* nth-child rules to hide far items — desktop ≥ 600px */ @media screen and (min-width: 600px) { .ag-acc__item:nth-child(3), .ag-acc__item:nth-child(10) { flex: 0 0 10px; } .ag-acc__item:nth-child(2), .ag-acc__item:nth-child(11) { flex: 0 0 5px; transform: translateX(-50px); } .ag-acc__item:nth-child(11) { transform: translateX(50px); } .ag-acc__item:nth-child(1), .ag-acc__item:nth-child(n+12) { flex: 0 0 0; margin: 0; box-shadow: none; opacity: 0 !important; } .ag-acc__item:not(:nth-child(n+5)) img, .ag-acc__item:nth-child(n+9) img { opacity: .8; } .ag-acc__item:not(:nth-child(n+4)) *, .ag-acc__item:nth-child(n+10) * { opacity: 0 !important; } } /* mobile < 600px */ @media screen and (max-width: 599px) { .ag-acc__item { flex-basis: 10%; margin: 0 5px; border-radius: 8px; font-size: 3vw; height: 60vw; } .ag-acc__item[data-active] { flex-basis: 55%; flex-grow: 0; } .ag-acc__item:nth-child(3), .ag-acc__item:nth-child(7) { flex: 0 0 10px; } .ag-acc__item:nth-child(2), .ag-acc__item:nth-child(8) { flex: 0 0 5px; transform: translateX(-50px); } .ag-acc__item:nth-child(8) { transform: translateX(50px); } .ag-acc__item:nth-child(1), .ag-acc__item:nth-child(n+9) { flex: 0 0 0; margin: 0; box-shadow: none; opacity: 0 !important; } .ag-acc__item:not(:nth-child(n+5)) img, .ag-acc__item:nth-child(n+7) img { opacity: .8; } .ag-acc__item:not(:nth-child(n+4)) *, .ag-acc__item:nth-child(n+7) * { opacity: 0 !important; } .ag-acc__contents { transform: translateX(-100%) rotate(90deg); transform-origin: bottom right; align-items: end; justify-content: end; background-image: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.4) 0%, transparent 50%); background-position: -100% 100%; flex-direction: column; bottom: 0; top: auto; text-align: right; } .ag-acc__item[data-active] .ag-acc__contents { background-position: 100% 100%; } .ag-acc__title, .ag-acc__cat { max-width: 70vh; transform: translateX(200px); } } .ag-mixte-list { display: flex; flex-direction: column; } .ag-mixte-list-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.1); text-decoration: none; color: inherit; } .ag-mixte-list-item:first-child { padding-top: 0; } .ag-mixte-list-item:last-child { border-bottom: none; } .ag-mixte-thumb { width: 110px; min-width: 110px; height: 76px; object-fit: cover; border-radius: 5px; } .ag-mixte-list-text { flex: 1; } .ag-mixte-list-cat { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; } .ag-mixte-list-title { font-size: .92rem; font-weight: 600; color: var(--c-title, var(--dark)); line-height: 1.35; margin: 4px 0 3px; } .ag-mixte-list-meta { font-size: .72rem; color: #888; } .ag-mixte-list-item:hover .ag-mixte-list-title { color: var(--primary); } .ag-mixte-right { display: flex; flex-direction: column; gap: 10px; } .ag-mixte-right-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ag-mixte-card { background: var(--light, #f8f9fa); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .ag-mixte-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .ag-mixte-card-body { padding: 10px 12px; } .ag-mixte-card-cat { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; } .ag-mixte-card-title { font-size: .88rem; font-weight: 600; color: var(--dark); margin: 4px 0 3px; line-height: 1.3; } .ag-mixte-card-meta { font-size: .72rem; color: #888; } .ag-mixte-card:hover .ag-mixte-card-title { color: var(--primary); } .ag-mixte-featured { display: flex; gap: 0; background: var(--light, #f8f9fa); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; flex: 1; } .ag-mixte-featured img { width: 190px; min-width: 190px; object-fit: cover; } .ag-mixte-featured-body { padding: 16px 14px; display: flex; flex-direction: column; justify-content: center; } .ag-mixte-featured-cat { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; } .ag-mixte-featured-title { font-size: 1.05rem; font-weight: 700; color: var(--c-title, var(--dark)); margin: 6px 0; line-height: 1.35; } .ag-mixte-featured-excerpt { font-size: .82rem; color: var(--c-subtitle, var(--warm-mid)); line-height: 1.5; margin: 0; } .ag-mixte-featured-meta { font-size: .72rem; color: #888; margin-top: 8px; } .ag-mixte-featured:hover .ag-mixte-featured-title { color: var(--primary); } @media (max-width: 767px) { .ag-mixte-grid { grid-template-columns: 1fr; } .ag-mixte-featured img { width: 130px; min-width: 130px; } } .blog-card--h { display: flex; flex-direction: row; align-items: stretch; } .blog-card-h-img { display: block; flex-shrink: 0; width: 180px; overflow: hidden; border-radius: 6px 0 0 6px; } .blog-card-h-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .blog-card--h:hover .blog-card-h-img img { transform: scale(1.05); } /* Grille articles : colonne empilée */ .ag-stack { display: flex; flex-direction: column; gap: 0; height: 100%; } .ag-stack-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.08); } .ag-stack-item:first-child { padding-top: 0; } .ag-stack-item:last-child { border-bottom: none; padding-bottom: 0; } .ag-stack-img { display: block; flex-shrink: 0; width: 110px; height: 80px; overflow: hidden; border-radius: 4px; } .ag-stack-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .ag-stack-item:hover .ag-stack-img img { transform: scale(1.05); } .ag-stack-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; } .ag-stack-title { font-size: 1rem; margin: 0; line-height: 1.4; } .ag-stack-title a { color: var(--dark); text-decoration: none; } .ag-stack-title a:hover { color: var(--gold); } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .blog-card:hover .blog-card-img img { transform: scale(1.05); } .blog-card-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; } .blog-card-body h3 { font-size: 1.2rem; margin: .5rem 0 .7rem; color: var(--c-title, var(--dark)); } .blog-card-body p { font-size: .82rem; color: var(--c-body, var(--warm-mid)); line-height: 1.65; margin-bottom: 1rem; } .blog-card-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: #a09880; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; } /* Sélecteur de colonnes */ .col-switcher { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; } .col-switcher span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--warm-mid); margin-right: .5rem; } .col-btn { background: none; border: 1px solid var(--rule); color: var(--warm-mid); padding: .35rem .7rem; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .35rem; } .col-btn:hover, .col-btn.active { background: var(--dark); color: var(--cream); border-color: var(--dark); } a.col-btn { text-decoration: none; } .col-switcher-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 .25rem; } /* Filtre catégories */ .cat-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .cat-btn { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; border: 1px solid var(--rule); padding: .3rem .8rem; transition: all .2s; } .cat-btn:hover, .cat-btn.active { background: var(--moss); color: #fff; border-color: var(--moss); } /* ─── ARTICLE ────────────────────────────────────────────── */ .article-hero { margin-top: var(--nav-height, 64px); position: relative; height: 55vh; min-height: 380px; overflow: hidden; } body.has-sticky-nav .article-hero { margin-top: 0; } .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } /* parallax : 35 % de marge en haut/bas pour absorber le déplacement du scroll */ .article-hero--parallax img { position: absolute; top: -35%; left: 0; right: 0; width: 100%; height: 170%; object-fit: cover; will-change: transform; } .article-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,16,8,.75) 0%, transparent 50%); } .article-hero-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 4rem; } /* ── Videos journal split-screen ── */ .vj-wrap { display: flex; align-items: flex-start; min-height: calc(100vh - var(--nav-height, 64px)); /* full-bleed: sort du container Bootstrap */ margin-left: calc(50% - 50vw); width: 100vw; } .vj-img { width: 50%; flex-shrink: 0; position: sticky; top: var(--nav-height, 64px); height: calc(100vh - var(--nav-height, 64px)); overflow: hidden; } body.has-sticky-nav .vj-img { top: 0; height: 100vh; } .vj-img-link { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; } .vj-img-link img { width: 100%; height: 100%; object-fit: cover; display: block; } .vj-img-placeholder { width: 100%; height: 100%; background: #1a1814; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: rgba(255,255,255,.2); } .vj-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 2rem; } .vj-play { font-size: 3.5rem; color: rgba(255,255,255,.85); line-height: 1; margin-bottom: 1rem; transition: color .2s; } .vj-img-link:hover .vj-play { color: var(--gold); } .vj-img-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem, 2.5vw, 2.2rem); color: #fff; margin: 0 0 .5rem; line-height: 1.2; } .vj-img-desc { font-size: .82rem; color: rgba(255,255,255,.7); margin: 0; line-height: 1.6; } .vj-list { width: 50%; min-height: calc(100vh - var(--nav-height, 64px)); overflow-y: auto; } .vj-item { display: flex; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background .15s; align-items: flex-start; } .vj-item:hover { background: var(--cream); } .vj-item-thumb { flex-shrink: 0; width: 130px; height: 80px; overflow: hidden; position: relative; } .vj-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vj-item-placeholder { width: 100%; height: 100%; background: #1a1814; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.25); font-size: 1.5rem; } .vj-item-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity .15s; } .vj-item:hover .vj-item-play { opacity: 1; } .vj-item-body { flex: 1; min-width: 0; } .vj-item-title { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 600; margin: .2rem 0 .3rem; line-height: 1.3; color: var(--dark); } .vj-item-desc { font-size: .76rem; color: var(--warm-mid); margin: 0; line-height: 1.5; } @media (max-width: 767px) { .vj-wrap { flex-direction: column; } .vj-img { width: 100%; position: relative; top: 0; height: 55vw; } .vj-list { width: 100%; } .vj-item-thumb { width: 90px; height: 58px; } } /* Ratio portrait 9:16 */ .ratio-portrait { --bs-aspect-ratio: 177.78%; } @media (max-width: 767px) { .ratio-portrait { margin: 0 calc(50% - 50vw); width: 100vw; aspect-ratio: 9 / 16; height: auto; border-radius: 0 !important; --bs-aspect-ratio: 0; position: relative; } .ratio-portrait::before { display: none; } .ratio-portrait > * { position: absolute; inset: 0; width: 100%; height: 100%; } } /* Panel journal portrait : largeur réduite, centré */ .vj-player--portrait { width: 35%; background: #000; display: flex; align-items: center; justify-content: center; } .vj-player--portrait + .article-journal-text { width: 65%; } /* Video journal layout overrides */ .vj-journal .article-journal-img { background: #000; width: auto; /* laisse l'aspect-ratio calculer la largeur */ flex-shrink: 0; } .vj-journal-landscape .article-journal-img { aspect-ratio: 16 / 9; } .vj-journal-portrait .article-journal-img { aspect-ratio: 9 / 16; } .vj-journal .article-journal-img img { object-fit: cover; } .vj-journal .article-journal-text { background: #fff; flex: 1; min-width: 0; } .vj-journal .article-journal-inner { padding: 2.5rem 2.5rem 3rem; } @media (max-width: 767px) { .vj-journal .article-journal-img { width: 100%; height: auto; aspect-ratio: 16/9; } .vj-journal-portrait .article-journal-img { aspect-ratio: 9/16; height: auto; max-height: 100vh; } } /* Vignettes suggérées portrait en rangée */ .vj-related { border-top: 1px solid var(--rule); padding-top: 1.5rem; } .vj-related-row { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; } .vj-related-card { flex-shrink: 0; width: 160px; text-decoration: none; color: inherit; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; border-radius: 8px; display: block; } .vj-related-thumb { position: absolute; inset: 0; } .vj-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .vj-related-card:hover .vj-related-thumb img { transform: scale(1.05); } .vj-related-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); font-size: 1.5rem; } .vj-related-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity .15s; } .vj-related-card:hover .vj-related-play { opacity: 1; } .vj-related-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem .6rem .6rem; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%); font-size: .72rem; line-height: 1.3; margin: 0; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Patchwork journal : 2 petites | grande centre | 3 petites ─ */ .vr-patchwork { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; grid-template-rows: repeat(6, 1fr); gap: 4px; /* hauteur calculée pour cartes droite en 9:16 : col_width ≈ panel/3.4 * 1, chaque card_right = height/3 → height = col_right_width * (16/9) * 3 ≈ 50vw/3.4 * 5.33 */ height: clamp(600px, calc(50vw / 3.4 * 5.33), 960px); padding: 1.5rem 4rem 0 3rem; } .vr-patchwork-card { display: block; position: relative; overflow: hidden; background: #111; text-decoration: none; border-radius: 8px; } /* 2 petites col 1 */ .vr-patchwork-card:nth-child(1) { grid-column: 1; grid-row: 1 / 4; } .vr-patchwork-card:nth-child(2) { grid-column: 1; grid-row: 4 / 7; } /* grande centre col 2 */ .vr-patchwork-card:nth-child(3) { grid-column: 2; grid-row: 1 / 7; } /* 2 petites col 3 */ .vr-patchwork-card:nth-child(4) { grid-column: 3; grid-row: 1 / 4; } .vr-patchwork-card:nth-child(5) { grid-column: 3; grid-row: 4 / 7; } /* 2 petites col 4 */ .vr-patchwork-card:nth-child(6) { grid-column: 4; grid-row: 1 / 4; } .vr-patchwork-card:nth-child(7) { grid-column: 4; grid-row: 4 / 7; } .vr-patchwork-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .vr-patchwork-card:hover img { transform: scale(1.05); } .vr-patchwork-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: rgba(255,255,255,.2); background: #1a1814; } .vr-patchwork-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%); padding: .6rem; opacity: 0; transition: opacity .2s; } .vr-patchwork-card:hover .vr-patchwork-overlay { opacity: 1; } .vr-patchwork-title { font-size: .68rem; line-height: 1.25; color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 767px) { .vr-patchwork { display: flex; flex-direction: column; gap: 6px; padding: 1rem 1rem 0; height: auto; } .vr-patchwork-card { aspect-ratio: 9 / 16; width: 100%; } } /* ── Mosaïque Instagram feed (related videos) ────────────────── */ .vr-ig-feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; } .vr-ig-feed--page { margin-top: 2rem; } .vr-ig-card { display: block; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111; text-decoration: none; color: inherit; } .vr-ig-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .vr-ig-card:hover img { transform: scale(1.04); } .vr-ig-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255,255,255,.25); background: #1a1814; } .vr-ig-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%); padding: .5rem .35rem; opacity: 0; transition: opacity .2s; } .vr-ig-card:hover .vr-ig-overlay { opacity: 1; } .vr-ig-title { font-size: .65rem; line-height: 1.25; color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Grille vidéos connexes (layout standard) ── */ .vr-cards-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .vr-card { display: block; text-decoration: none; color: inherit; } .vr-card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #111; margin-bottom: .6rem; } .vr-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; } .vr-card:hover .vr-card-thumb img { transform: scale(1.05); } .vr-card-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255,255,255,.25); background: #1a1814; } .vr-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; font-size: 1.8rem; color: #fff; } .vr-card:hover .vr-card-play { opacity: 1; } .vr-card-title { font-size: .8rem; line-height: 1.35; color: var(--dark); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1100px) { .vr-cards-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .vr-cards-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } } /* ── Vidéos connexes dans le panneau journal ── */ .vr-journal-related { padding-bottom: 2rem; } .vr-journal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 0 1.5rem 1.5rem; } @media (max-width: 768px) { .vr-journal-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } } /* Lecteur vidéo dans le panel gauche journal */ .vj-player-panel iframe, .vj-player-panel video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; border: none; } /* ── Layout Journal (split screen) ─────────────────────────── */ .article-journal-wrap { display: flex; align-items: flex-start; min-height: calc(100vh - var(--nav-height, 64px)); margin-top: var(--nav-height, 64px); } body.has-sticky-nav .article-journal-wrap { margin-top: 0; } /* Disposition inversée (image à droite, texte à gauche) : desktop uniquement */ .article-journal-wrap--reverse { flex-direction: row-reverse; } .article-journal-img { width: 50%; flex-shrink: 0; position: sticky; top: var(--nav-height, 64px); height: calc(100vh - var(--nav-height, 64px)); overflow: hidden; } body.has-sticky-nav .article-journal-img { top: 0; height: 100vh; } .article-journal-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-journal-text { width: 50%; height: calc(100vh - var(--nav-height, 64px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; } .article-journal-inner { padding: 1.5rem 4rem 4rem 3rem; } .article-journal-text .vr-ig-feed { padding: 0 4rem 0 3rem; } .article-journal-inner img { max-width: 100%; height: auto; display: block; } /* Titre/badge/date en surimpression : réservés au mode téléphone (cf. media query) */ .article-journal-overlay { display: none; } @media (max-width: 767px) { /* Article journal : image pleine largeur au-dessus du texte */ .article-journal-wrap { flex-direction: column; } .article-journal-img { position: relative; top: auto; width: 100%; height: 55vh; min-height: 380px; flex-shrink: 0; } body.has-sticky-nav .article-journal-img { height: 55vh; top: auto; } /* Reprend le pattern du hero statique en mode téléphone : titre/badge/date en surimpression sur la photo (au lieu du titre affiché sous l'image en desktop) */ .article-journal-overlay { display: block; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(17,16,8,.75) 0%, transparent 50%); padding: 2rem 1.5rem; color: #fff; } .article-journal-mobile-title { font-family: var(--font-serif); font-weight: var(--fw-heading, 300); font-size: var(--fs-h1, clamp(1.8rem,4vw,3rem)); line-height: 1.15; color: #fff; max-width: 700px; margin: 0; } .article-journal-desktop-title { display: none !important; } .article-journal-text { width: 100%; height: auto; overflow-y: visible; } .article-journal-inner { padding: 1.25rem 1rem 2rem; } .article-journal-text .vr-ig-feed { padding: 0 1rem; } /* Vidéo journal : colonne sur mobile (vidéo en haut, texte en dessous) */ .vj-journal .article-journal-wrap { flex-direction: column; } .vj-journal .article-journal-img { width: 100%; height: auto; min-height: unset; max-height: unset; position: relative; top: auto; } .vj-journal-landscape .article-journal-img { aspect-ratio: 16/9; } .vj-journal-portrait .article-journal-img { aspect-ratio: 9 / 16; width: 100vw; height: auto; top: auto; margin: 0 calc(50% - 50vw); } body.has-sticky-nav .vj-journal-portrait .article-journal-img { height: auto; } .vj-journal .article-journal-text { width: 100%; height: auto; overflow-y: visible; } } /* ── Layout Fashion (image 40% overlay + texte 2 colonnes) ──── */ .article-fashion-wrap { display: flex; align-items: flex-start; min-height: calc(100vh - var(--nav-height, 64px)); margin-top: var(--nav-height, 64px); } body.has-sticky-nav .article-fashion-wrap { margin-top: 0; } .article-fashion-img { width: 40%; flex-shrink: 0; position: sticky; top: var(--nav-height, 64px); height: calc(100vh - var(--nav-height, 64px)); overflow: hidden; } body.has-sticky-nav .article-fashion-img { top: 0; height: 100vh; } .article-fashion-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Titre en surimpression : réservé au mode téléphone (cf. media query) */ .article-fashion-overlay { display: none; } .article-fashion-text { width: 60%; height: calc(100vh - var(--nav-height, 64px)); overflow-y: auto; border-left: 1px solid var(--rule); scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; } .article-fashion-inner { padding: 1.5rem 3.5rem 4rem; } .article-fashion-inner img { max-width: 100%; height: auto; display: block; } .article-fashion-inner .article-body { column-count: 2; column-gap: 2.4rem; } .article-fashion-inner .article-body p { font-size: .84rem; line-height: 1.8; } .article-fashion-inner .article-body h2, .article-fashion-inner .article-body h3, .article-fashion-inner .article-body img, .article-fashion-inner .article-body blockquote, .article-fashion-inner .article-body figure { break-inside: avoid-column; } /* Bouton "retour en haut" générique (tous layouts d'article) */ #article-back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 500; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--dark); color: var(--cream); border: none; border-radius: 50%; font-size: 1.05rem; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: opacity .3s, transform .3s, background .2s, color .2s; } #article-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } #article-back-to-top:hover { background: var(--gold); color: var(--dark); } @media (max-width: 767px) { #article-back-to-top { right: 1rem; bottom: 1rem; width: 38px; height: 38px; font-size: .95rem; } } @media (max-width: 767px) { .article-fashion-wrap { flex-direction: column; } .article-fashion-img { position: relative; top: auto; width: 100%; height: 55vh; min-height: 380px; flex-shrink: 0; } body.has-sticky-nav .article-fashion-img { height: 55vh; top: auto; } /* Reprend le pattern du hero statique en mode téléphone : titre en surimpression sur la photo (au lieu du titre affiché sous l'image en desktop) — identique au layout journal */ .article-fashion-overlay { display: block; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(17,16,8,.75) 0%, transparent 50%); padding: 2rem 1.5rem; color: #fff; } .article-fashion-mobile-title { font-family: var(--font-serif); font-weight: var(--fw-heading, 300); font-size: var(--fs-h1, clamp(1.8rem,4vw,3rem)); line-height: 1.15; color: #fff; max-width: 700px; margin: 0; } .article-fashion-desktop-title { display: none !important; } .article-fashion-text { width: 100%; height: auto; overflow-y: visible; border-left: none; border-top: 1px solid var(--rule); } .article-fashion-inner { padding: 1.5rem 1rem 2rem; } .article-fashion-inner .article-body { column-count: 1; } } /* ── Animations entrée hero ─────────────────────────────────── */ @keyframes ah-slide-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .ah-anim { opacity: 0; animation: ah-slide-up .65s cubic-bezier(.22,.68,0,1.2) forwards; } .ah-anim-1 { animation-delay: .1s; } .ah-anim-2 { animation-delay: .28s; } .ah-anim-3 { animation-delay: .48s; } .article-content { max-width: 1320px; margin: 0 auto; padding: 3rem 2rem; } .article-content h2 { font-size: 1.7rem; margin-top: 2rem; } .article-content h3 { font-size: 1.4rem; margin-top: 1.5rem; } .article-content p { font-size: .9rem; line-height: 1.85; margin-bottom: 1.2rem; } .article-content img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; } .article-content blockquote, .article-body blockquote { border-left: 3px solid var(--gold); padding-left: 1.5rem; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; color: var(--warm-mid); margin: 2rem 0; } /* ─── CLUB / CTA ─────────────────────────────────────────── */ #club { background: var(--moss); color: var(--cream); padding: 6rem 0; position: relative; overflow: hidden; } #club::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 80px, rgba(255,255,255,.015) 80px, rgba(255,255,255,.015) 81px ); pointer-events: none; } .club-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 1; } .club-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); margin-bottom: 1rem; } .club-perks { list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; } .club-perks li { display: flex; align-items: flex-start; gap: .7rem; font-size: .85rem; color: rgba(245,240,232,.75); padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); } .club-perks li i { color: var(--gold-lt); font-size: 12px; margin-top: 4px; } .btn-club { display: inline-flex; align-items: center; gap: .6rem; background: var(--gold); color: var(--dark) !important; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .8rem 2rem; text-decoration: none; transition: background .2s; } .btn-club:hover { background: var(--gold-lt); } .club-img { position: relative; } .club-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } .club-img::before { content: ''; position: absolute; top: -20px; left: -20px; right: 20px; bottom: 20px; border: 1px solid var(--gold); pointer-events: none; z-index: -1; } /* ─── NEWSLETTER ─────────────────────────────────────────── */ .section-newsletter { background: var(--cream); padding: 2rem 0; } .nl-title { font-size: var(--fs-h2, clamp(1.8rem, 3vw, 2.6rem)); margin-bottom: .5rem; } .nl-sub { font-size: .85rem; color: var(--warm-mid); margin-bottom: 2.5rem; } .nl-form { display: flex; max-width: 480px; margin: 0 auto; border: 1px solid var(--rule); background: #fff; } .nl-form input { flex: 1; border: none; outline: none; padding: .85rem 1.2rem; font-family: 'Barlow', sans-serif; font-size: .83rem; background: transparent; color: var(--charcoal); } .nl-form button { background: var(--dark); color: var(--cream); border: none; padding: .85rem 1.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .nl-form button:hover { background: var(--gold); } @keyframes nlFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .nl-confirm { display: inline-block; margin-top: 1.5rem; padding: 1.6rem 2.4rem; border-radius: 4px; max-width: 420px; font-size: .95rem; line-height: 1.6; } .nl-confirm--ok { background: rgba(245,240,232,.08); border: 1px solid rgba(245,240,232,.18); color: var(--cream); } .section-newsletter--light .nl-confirm--ok { background: rgba(42,40,32,.05); border-color: rgba(42,40,32,.15); color: var(--dark); } .nl-confirm--ok strong { display: block; font-size: 1.05rem; font-family: var(--font-serif, 'Cormorant Garamond', serif); font-weight: 600; } .nl-confirm--err { background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; font-size: .85rem; } .nl-retry { background: none; border: 1px solid currentColor; color: inherit; padding: .2rem .7rem; margin-left: .75rem; cursor: pointer; font-size: .8rem; border-radius: 3px; } /* ─── FOOTER ─────────────────────────────────────────────── */ footer { background: var(--dark); color: #756c5a; padding: 0rem 0 0rem; border-top: 2px solid var(--gold); } .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); text-decoration: none; display: block; margin-bottom: .3rem; } .footer-tagline { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } .footer-nav h6 { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); margin-bottom: 1rem; } .footer-nav ul { list-style: none; padding: 0; margin: 0; } .footer-nav li { margin-bottom: .5rem; } .footer-nav a { color: #756c5a; text-decoration: none; font-size: .8rem; transition: color .2s; } .footer-nav a:hover { color: var(--gold-lt); } .footer-social { display: flex; gap: 1rem; margin-top: 1rem; } .footer-social a { width: 34px; height: 34px; border: 1px solid #3a3626; display: flex; align-items: center; justify-content: center; color: #756c5a; text-decoration: none; font-size: 13px; transition: border-color .2s, color .2s; } .footer-social a:hover { border-color: var(--gold); color: var(--gold); } .footer-bottom { border-top: 1px solid #1e1c14; margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: #4a4435; flex-wrap: wrap; gap: .5rem; } .footer-bottom a { color: #4a4435; text-decoration: none; transition: color .2s; } .footer-bottom a:hover { color: var(--gold); } /* ─── LOGIN PAGE ─────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--dark); padding: 2rem; position: relative; overflow: hidden; } .login-wrap::before { content: 'GOLF'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Cormorant Garamond', serif; font-size: 18rem; font-weight: 300; color: rgba(255,255,255,.025); pointer-events: none; white-space: nowrap; } .login-card { background: var(--ivory); width: 100%; max-width: 420px; padding: 3rem; border-top: 3px solid var(--gold); position: relative; z-index: 1; } .login-logo-text { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); text-decoration: none; display: block; text-align: center; } .login-logo-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); display: block; text-align: center; margin-bottom: 2.5rem; margin-top: .2rem; } .form-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--warm-mid); margin-bottom: .4rem; } .form-control { border: 1px solid var(--rule); border-radius: 0; background: #fff; color: var(--charcoal); font-family: 'Barlow', sans-serif; font-size: .85rem; padding: .65rem 1rem; } .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,153,58,.15); background: #fff; } .btn-login { background: var(--dark); color: var(--cream); border: none; width: 100%; padding: .85rem; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .2s; border-radius: 0; } .btn-login:hover { background: var(--gold); } /* ─── ALERTES ────────────────────────────────────────────── */ .alert-sdb { border-radius: 0; font-size: .83rem; font-family: 'Barlow', sans-serif; } .alert-success-sdb { background: #eef4e8; border-left: 3px solid var(--moss); color: var(--moss); } .alert-error-sdb { background: #fdf0ef; border-left: 3px solid #c0392b; color: #c0392b; } /* ─── PAGINATION ─────────────────────────────────────────── */ .pag-wrap { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; } .pag-wrap--always { align-items: center; gap: .5rem; } .pag-numbers { display: flex; gap: .4rem; } .pag-link { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; border: 1px solid var(--rule); color: var(--charcoal); text-decoration: none; padding: .4rem .8rem; transition: all .2s; min-width: 36px; text-align: center; display: inline-flex; align-items: center; gap: .35rem; } .pag-link:hover, .pag-link.active { background: var(--dark); color: var(--cream); border-color: var(--dark); } .pag-disabled { opacity: .35; cursor: default; pointer-events: none; } .pag-ellipsis { border: none; pointer-events: none; } .pag-prev, .pag-next { min-width: auto; padding: .4rem 1rem; } .pag-info { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .1em; color: var(--warm-mid); text-transform: uppercase; padding: 0 .5rem; } /* ─── PAGINATION CHEVRONS OVERLAY ───────────────────────── */ .pag-chevron-overlay { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; z-index: 200; background: rgb(250, 255, 255); backdrop-filter: blur(8px); padding: .55rem 1.4rem; border-radius: 2rem; } .pag-chev-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; font-size: 0.95rem; cursor: pointer; padding: .15rem .35rem; text-decoration: none; transition: color .2s, opacity .2s; line-height: 1; } .pag-chevron-overlay .pag-chev-btn { color: var(--c-subtitle); } .pag-chev-btn:hover { color: var(--gold); } .pag-chev-disabled { opacity: .3; pointer-events: none; } .pag-chev-info { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 1rem; /* color: rgba(0, 0, 0, 0.9); */ color: var(--c-subtitle); min-width: 3.5rem; text-align: center; letter-spacing: .05em; } /* ─── PAGINATION SIMPLE ─────────────────────────────────── */ .pag-simple { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2.5rem; } .pag-simple-btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dark, #111008); text-decoration: none; padding: .45rem 1.1rem; border: 1px solid var(--rule); transition: background .2s, color .2s; } .pag-simple-btn:hover { background: var(--dark); color: var(--cream); } .pag-simple-disabled { opacity: .35; pointer-events: none; } .pag-simple-info { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 1.1rem; color: var(--warm-mid, #8a7d6a); min-width: 5rem; text-align: center; } /* ─── SCROLL REVEAL ──────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } /* ─── PAYMENT SECTION ────────────────────────────────────── */ .payment-card { border: 1px solid var(--rule); padding: 2rem; background: var(--ivory); transition: border-color .3s, box-shadow .3s; } .payment-card:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(0,0,0,.06); } .price-big { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 300; color: var(--dark); line-height: 1; } .price-period { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warm-mid); } /* ─── PAGE HEADER ────────────────────────────────────────── */ .page-header { margin-top: var(--nav-height, 64px); background: var(--dark); padding: 5rem 0 4rem; position: relative; overflow: hidden; } body.has-sticky-nav .page-header { margin-top: 0; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .page-header h1 { color: var(--cream); font-size: clamp(2rem, 5vw, 3.5rem); } .page-header .label { display: block; margin-bottom: .75rem; } /* ─── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 991px) { .nav-inner { grid-template-columns: 1fr auto !important; grid-template-areas: "logo ham" !important; } .nav-links-wrap, .nav-right { display: none !important; } .hamburger { display: flex; } .hero-carousel-wrap .carousel-item { min-height: 70vh; } .carousel-caption-custom { padding: 2rem 1.5rem; min-height: 70vh; } .about-inner { grid-template-columns: 1fr; gap: 2rem; } .about-divider { display: none; } .club-inner { grid-template-columns: 1fr; gap: 2.5rem; } .club-img::before { display: none; } .article-hero-caption { padding: 2rem 1.5rem; } } @media (max-width: 576px) { .about-stats { gap: 1.5rem; flex-wrap: wrap; } .login-card { padding: 2rem 1.5rem; } } /* ═══════════════════════════════════════════════════════════════ SECTIONS — Nouveaux types (hero_centered, hero_split, hero_dark) ═══════════════════════════════════════════════════════════════ */ /* ─── Hero Centré ───────────────────────────────────────────── */ .sec-hero-centered { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: var(--cream); } .sec-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 8s ease; } .sec-hero-centered:hover .sec-hero-bg { transform: scale(1); } .sec-hero-overlay { position: absolute; inset: 0; background: var(--dark); } .sec-hero-body { position: relative; z-index: 2; max-width: 780px; padding: 3rem 1.5rem; } .sec-hero-title { font-family: var(--font-serif); font-size: var(--fs-h1, clamp(2.5rem, 6vw, 5rem)); font-weight: var(--fw-heading, 300); line-height: var(--lh-heading, 1.1); letter-spacing: .02em; color: inherit; margin-bottom: 1rem; } .sec-hero-subtitle { font-size: var(--fs-subtitle, clamp(.9rem, 1.8vw, 1.1rem)); line-height: 1.7; opacity: .85; max-width: 560px; margin: 0 auto 1.5rem; } .sec-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ─── Hero Split 50/50 ──────────────────────────────────────── */ /* ── Hero Split 50/50 ─────────────────────────────────────── */ .sec-hero-split { padding: 0; /* annule section { padding: 5rem 0 } */ overflow: hidden; } .sec-split-grid { display: grid; /* grid-template-columns défini inline (ratio) */ min-height: 600px; /* écrasé par l'inline style de la section */ width: 100%; } .sec-split-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem); } .sec-split-eyebrow { font-family: var(--font-cond); font-size: var(--fs-eyebrow, .75rem); letter-spacing: .2em; text-transform: uppercase; color: var(--c-eyebrow, var(--gold)); margin-bottom: .6rem; } .sec-split-title { font-family: var(--font-serif); font-size: var(--fs-h2, clamp(2rem, 4vw, 3.5rem)); font-weight: var(--fw-heading, 300); line-height: var(--lh-heading, 1.15); color: var(--c-title, var(--dark)); margin-bottom: 1rem; } .sec-split-body { font-size: var(--fs-body, .92rem); line-height: 1.75; color: var(--c-body, var(--charcoal)); max-width: 480px; } .sec-split-img { position: relative; /* ancre pour le wrap absolu */ } .sec-split-img-wrap { position: absolute; inset: 0; overflow: hidden; } .sec-split-img-el { width: 100%; height: 100%; object-fit: cover; display: block; } /* parallax : image plus haute pour absorber le déplacement */ .sec-split-img-el--parallax { position: absolute; top: -25%; left: 0; right: 0; width: 100%; height: 150%; object-fit: cover; will-change: transform; } /* bg fallback (sans image) */ .sec-split-img-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } /* ─── Hero Sombre ───────────────────────────────────────────── */ .sec-hero-dark { padding: 5rem 1.5rem; text-align: center; } .sec-dark-title { font-family: var(--font-serif); font-size: var(--fs-h1, clamp(2.2rem, 5vw, 4rem)); font-weight: var(--fw-heading, 300); line-height: var(--lh-heading, 1.15); margin-bottom: 1rem; color: inherit; } .sec-dark-subtitle { font-size: var(--fs-subtitle, clamp(.88rem, 1.6vw, 1rem)); line-height: 1.7; opacity: .75; max-width: 560px; margin: 0 auto 1.5rem; } /* ─── Bouton outline ─────────────────────────────────────────── */ .btn-outline-sdb { display: inline-block; padding: .7rem 1.6rem; border: 1px solid var(--cream); color: var(--cream); font-family: 'Barlow Condensed', sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; } .btn-outline-sdb:hover { background: var(--cream); color: var(--dark); } /* ─── Séparateur règle ───────────────────────────────────────── */ .sec-separator-rule { display: flex; align-items: center; padding: 2rem var(--container-px, 2rem); } .sec-separator-rule span { flex: 1; height: 1px; background: var(--rule); } /* ─── Éditions ───────────────────────────────────────────────── */ .sec-editions { padding: 4rem 0; } /* edition-card supprimé — remplacé par .blog-card */ /* ─── Carousel : hauteur dynamique via CSS var ───────────────── */ .carousel-item[style*="--slide-height"] { min-height: var(--slide-height, 92vh); } .hero-carousel-wrap .carousel-item { min-height: var(--slide-height, 92vh); } /* ─── Responsive hero split ─────────────────────────────────── */ @media (max-width: 767px) { .sec-split-grid { grid-template-columns: 1fr !important; min-height: auto !important; } .sec-split-img { min-height: 280px; order: -1 !important; } .sec-split-text { order: 1 !important; } } /* Pas de séparation entre sections contiguës hero/split */ /* ─── Section Split Layout (30/70 · 70/30) ──────────────────── */ .sec-split-layout { overflow: hidden; padding: 0; /* neutralise section { padding: 5rem 0 } */ } .sec-sl-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.25rem; padding: 2.5rem 1.5rem; } .sec-split-eyebrow { font-family: var(--font-cond); font-size: var(--fs-eyebrow, .72rem); letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #b8993a); margin: 0; } .sec-sl-title { font-family: var(--font-serif); font-size: var(--fs-h2, clamp(1.6rem, 3vw, 2.6rem)); line-height: var(--lh-heading, 1.2); margin: 0; } .sec-sl-body { font-size: 1rem; line-height: 1.75; opacity: .85; max-width: 52ch; text-align: center; } .sec-sl-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; } .sec-sl-figure { display: block; width: 100%; overflow: hidden; padding: 0; } .sec-sl-img { padding: 0 !important; } .sec-sl-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .sec-sl-figure:hover img { transform: scale(1.03); } .sec-sl-placeholder { background: #e8e4db; display: flex; align-items: center; justify-content: center; color: #999; } .sec-sl-caption { font-size: .78rem; opacity: .55; margin-top: .5rem; font-style: italic; } /* Image à gauche (image_text) : l'image colle au bord sur large */ .sec-image-text .col-lg-8:first-child .sec-sl-figure { margin-left: calc(((100vw - 100%) / -2)); } @media (max-width: 991px) { .sec-sl-text { padding: 2rem 1rem; } .sec-sl-body { max-width: none; } /* Image remonte au-dessus sur mobile */ .sec-text-image .sec-sl-img { order: -1; } .sec-image-text .sec-sl-img { order: -1; } .sec-image-text .col-lg-8:first-child .sec-sl-figure { margin-left: 0; } } /* ─── Admin legend ────────────────────────────────────────────── */ .admin-legend { font-family: var(--font-cond, 'Barlow Condensed', sans-serif); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; border: none; padding: 0; float: none; width: auto; } /* ─── Section Vidéo ────────────────────────────────────────────── */ .sec-video { width: 100%; } .sec-video .container-fluid { padding-left: 0; padding-right: 0; } .sec-video .ratio { overflow: hidden; } .sec-video iframe, .sec-video video { display: block; } .sec-video-header { padding: 0 1rem; } @media (max-width: 767px) { .sec-video-header { padding: 0; } } /* ─── Grille Vidéos ─────────────────────────────────────────────── */ .sec-videos-grid { padding: 4rem 0; } .sec-videos-header { text-align: center; margin-bottom: 2.5rem; } /* vid-card supprimé — remplacé par .blog-card */ /* ─── Navigation article précédent / suivant ────────────────────── */ .art-nav { border-top: 1px solid var(--rule); } .art-nav-inner, .art-nav--journal { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1.5rem; } .art-nav-inner { max-width: 1100px; margin: 0 auto; } .art-nav--journal { padding: 0 3rem; } .art-nav-prev, .art-nav-next { display: flex; align-items: center; gap: .75rem; padding: 1.6rem 0; color: var(--dark); text-decoration: none; min-width: 0; transition: color .15s; } .art-nav-next { justify-content: flex-end; text-align: right; } .art-nav-prev:hover, .art-nav-next:hover { color: var(--gold); } .art-nav-chevron { font-size: 1.5rem; color: var(--gold); flex-shrink: 0; line-height: 1; } .art-nav-meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .art-nav-label { font-size: .95rem; /* text-transform: uppercase; */ /* letter-spacing: .09em; */ color: var(--gold); font-family: var(--c-breadcrumb, sans-serif); } .art-nav-title { font-size: .88rem; font-weight: 600; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .art-nav--journal .art-nav-prev, .art-nav--journal .art-nav-next { padding: 1.4rem 0; } @media (max-width: 767px) { .art-nav-inner { padding: 0 1rem; } .art-nav--journal { padding: 0 1rem; } }