/* ========================================================================== TC ECHALLENS — Feuille de styles principale -------------------------------------------------------------------------- OÙ MODIFIER QUOI : · Couleurs ................ bloc :root ci-dessous (--forest, --clay, ...) · Typographies ............ --font-display / --font-body (+ Google Fonts dans le de chaque page) · Largeur du contenu ...... --shell · Espacements de section .. --section-space · Rayons / ombres ......... --radius / --shadow · Transitions ............. --transition · Logo .................... assets/images/club-logo.png (référencé dans le header et le footer de chaque page HTML) · Coordonnées, liens de réservation, tarifs, horaires, documents : directement dans les fichiers HTML — chaque bloc concerné est précédé d'un commentaire « ». SOMMAIRE 1. Variables & reset 2. Utilitaires (shell, section, skip-link) 3. Bandeau info + header + navigation 4. Hero d'accueil 5. Boutons & liens 6. Accès rapides 7. Histoire du club 8. Installations 9. Cours 10. Adhésion 11. Vie du club / actualités 12. Compétition 13. Restaurant 14. Partenaires 15. Contact & formulaires 16. FAQ 17. Footer & back-to-top 18. Animations d'apparition 19. Composants des pages intérieures (hero de page, prose, cartes, tableaux, documents, comité, galerie, article, 404) 20. Responsive ========================================================================== */ :root { --forest: #173f35; --forest-deep: #0e2d27; --sage: #aabf95; --cream: #f3efe5; --paper: #fbfaf6; --clay: #b65333; --clay-dark: #913b26; --graphite: #172229; --ink: #17201d; --muted: #66706b; --line: rgba(23, 32, 29, 0.18); --line-light: rgba(255, 255, 255, 0.22); --white: #fff; --font-display: "DM Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Manrope", "Segoe UI", Arial, sans-serif; --shell: min(1280px, calc(100% - 64px)); --section-space: clamp(88px, 10vw, 152px); --radius: 0px; --shadow: 0 18px 40px rgba(14, 45, 39, 0.12); --transition: 180ms ease; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 104px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.menu-open { overflow: hidden; } img { display: block; max-width: 100%; } /* Garde-fou : les chaînes longues (e-mails, URL) ne doivent jamais provoquer de débordement horizontal sur les petits écrans. */ .footer-grid a, .contact-details a, .prose a, .info-card a, .doc-body, .callout p { overflow-wrap: anywhere; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; } ::selection { background: var(--clay); color: var(--white); } .shell { width: var(--shell); margin-inline: auto; } .section { padding-block: var(--section-space); } .skip-link { position: fixed; z-index: 1000; top: 12px; left: 16px; padding: 12px 18px; background: var(--cream); color: var(--forest-deep); font-weight: 700; transform: translateY(-160%); transition: transform 180ms ease; } .skip-link:focus { transform: translateY(0); } .club-notice { position: relative; z-index: 50; height: 36px; background: var(--clay); color: var(--white); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .notice-inner { display: flex; align-items: center; justify-content: center; height: 100%; gap: 18px; } .notice-inner p { margin: 0; } .notice-kicker { padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.5); font-weight: 700; } .notice-inner a { font-weight: 700; } .site-header { position: absolute; z-index: 40; top: 36px; left: 0; right: 0; color: var(--white); transition: background 220ms ease, transform 220ms ease, padding 220ms ease; } .site-header.is-sticky { position: fixed; top: 0; background: rgba(14, 45, 39, 0.98); border-bottom: 1px solid var(--line-light); } .header-inner { min-height: 96px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; border-bottom: 1px solid var(--line-light); } .site-header.is-sticky .header-inner { min-height: 72px; border-bottom: 0; } .brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; font-family: var(--font-display); } .brand-mark { position: relative; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--cream); border: 2px solid rgba(255, 255, 255, 0.65); } .brand-mark img { width: 100%; height: 150%; object-fit: cover; object-position: top center; } .brand-name { font-size: 18px; letter-spacing: -0.04em; white-space: nowrap; } .brand-name strong { font-weight: 700; } .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2vw, 34px); } .main-nav a { position: relative; font-size: 12px; font-weight: 600; } .main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: var(--clay); transition: right 180ms ease; } .main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; } .header-cta { min-height: 48px; display: inline-flex; align-items: center; gap: 24px; padding-inline: 20px; background: var(--cream); color: var(--forest-deep); font-size: 12px; font-weight: 700; transition: background 180ms ease, color 180ms ease; } .header-cta:hover { background: var(--clay); color: var(--white); } .menu-toggle { display: none; } .hero { position: relative; min-height: max(820px, 100svh); display: flex; align-items: center; overflow: hidden; background: var(--forest-deep); color: var(--white); } .hero-media, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-media { object-fit: cover; object-position: center; transform: scale(1.015); } .hero-shade { background: linear-gradient(90deg, rgba(9, 37, 31, 0.96) 0%, rgba(9, 37, 31, 0.76) 42%, rgba(9, 37, 31, 0.25) 72%, rgba(9, 37, 31, 0.46) 100%), linear-gradient(0deg, rgba(9, 37, 31, 0.88) 0%, transparent 40%); } .hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: end; gap: clamp(60px, 8vw, 130px); padding-top: 150px; padding-bottom: 190px; } .eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; } .eyebrow span { color: var(--forest); } .eyebrow-light { color: rgba(255, 255, 255, 0.6); } .eyebrow-light span { color: var(--sage); } .hero h1, .section-heading h2, .story-intro h2, .membership h2, .competition h2, .restaurant h2, .partners h2, .faq h2 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 0.96; letter-spacing: -0.055em; text-wrap: balance; } .hero h1 { max-width: 880px; font-size: clamp(58px, 7vw, 108px); } .hero h1 em { color: var(--sage); font-style: normal; } .hero-lede { max-width: 660px; margin: 30px 0 0; color: rgba(255, 255, 255, 0.78); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; } .hero-actions, .membership-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 22px; border: 1px solid transparent; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; } .button:hover { transform: translateY(-2px); } .button-clay { background: var(--clay); color: var(--white); } .button-clay:hover { background: var(--clay-dark); } .button-ghost { border-color: rgba(255, 255, 255, 0.48); color: var(--white); } .button-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--forest-deep); } .hero-card { align-self: end; background: var(--cream); color: var(--ink); border-top: 5px solid var(--clay); padding: 24px; } .hero-card-top { display: flex; justify-content: space-between; align-items: center; } .mono-label { display: block; color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 5px rgba(201, 103, 62, 0.16); } .hero-card-title { margin: 46px 0 26px; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; } .spec-list { margin: 0 0 26px; } .spec-list div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line); font-size: 11px; } .spec-list dt { color: var(--muted); } .spec-list dd { margin: 0; font-weight: 700; } .hero-card > a { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ink); color: var(--forest-deep); font-size: 12px; font-weight: 700; } .hero-metrics { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-light); background: rgba(14, 45, 39, 0.86); } .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .metric-grid > div { display: grid; gap: 2px; min-height: 132px; align-content: center; padding: 22px 30px; border-left: 1px solid var(--line-light); } .metric-grid > div:last-child { border-right: 1px solid var(--line-light); } .metric-grid strong { font-family: var(--font-display); font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.05em; } .metric-grid span { color: rgba(255, 255, 255, 0.62); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } .quick-actions { background: var(--cream); } .section-heading { margin-bottom: clamp(52px, 7vw, 90px); } .section-heading h2, .story-intro h2, .restaurant h2, .partners h2, .faq h2 { font-size: clamp(48px, 6vw, 86px); } .action-list { border-top: 1px solid var(--line); } .action-row { display: grid; grid-template-columns: 80px 1fr 64px; align-items: center; min-height: 132px; border-bottom: 1px solid var(--line); transition: color 180ms ease, padding 180ms ease, background 180ms ease; } .action-row:hover { padding-inline: 22px; background: var(--forest); color: var(--white); } .action-number { align-self: start; padding-top: 34px; color: var(--clay); font-family: "Courier New", monospace; font-size: 11px; } .action-main { display: grid; grid-template-columns: minmax(250px, 0.75fr) minmax(300px, 1fr); align-items: center; gap: 40px; } .action-main strong { font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; letter-spacing: -0.04em; } .action-main small { color: var(--muted); font-size: 13px; } .action-row:hover .action-main small { color: rgba(255, 255, 255, 0.65); } .action-arrow { justify-self: end; font-size: 26px; } .club-story { background: var(--paper); } .story-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.56fr); gap: 68px 9vw; } .story-intro { grid-column: 1 / -1; } .story-body { max-width: 750px; } .story-lede { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 40px); line-height: 1.25; letter-spacing: -0.035em; } .story-body > p:not(.story-lede) { max-width: 600px; margin: 28px 0; color: var(--muted); } .text-link { display: inline-flex; align-items: center; gap: 22px; padding-bottom: 7px; border-bottom: 1px solid currentColor; color: var(--forest); font-size: 12px; font-weight: 700; } .story-figure { grid-row: span 2; margin: 0; } .story-figure img { width: 100%; min-height: 500px; object-fit: cover; } .story-figure figcaption, .restaurant-photo figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .story-facts { border-top: 1px solid var(--line); } .story-facts > div { display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line); } .story-facts span { color: var(--clay); font-family: "Courier New", monospace; font-size: 11px; } .story-facts p { display: grid; margin: 0; color: var(--muted); font-size: 12px; } .story-facts strong { color: var(--ink); font-family: var(--font-display); font-size: 18px; } .facilities { background: var(--cream); } .heading-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.5fr); align-items: end; gap: 80px; } .heading-split > p { margin: 0 0 6px; color: var(--muted); } .facility-mosaic { display: grid; grid-template-columns: 1.3fr 0.72fr; grid-template-rows: auto auto; gap: 16px; } .facility { position: relative; min-height: 340px; margin: 0; overflow: hidden; background: var(--forest-deep); color: var(--white); } .facility-wide { min-height: 480px; } .facility-tall { grid-row: span 2; } .facility img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1); } .facility:hover img { transform: scale(1.035); } .facility::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(7, 31, 25, 0.9)); } .facility figcaption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; align-items: end; gap: 20px; } .facility figcaption strong { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 500; letter-spacing: -0.04em; } .facility figcaption span { max-width: 170px; color: rgba(255, 255, 255, 0.72); font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: 0.08em; } .facility-note { display: grid; grid-template-columns: 90px 1fr; gap: 18px; min-height: 220px; align-content: center; padding: 34px; background: var(--clay); color: var(--white); } .facility-note .mono-label { color: rgba(255, 255, 255, 0.64); } .facility-note p { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 30px); line-height: 1.22; letter-spacing: -0.035em; } .facility-note a { grid-column: 2; width: max-content; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 700; } .courses { background: var(--forest-deep); color: var(--white); } .courses .heading-split > p { color: rgba(255, 255, 255, 0.58); } .course-list { border-top: 1px solid var(--line-light); } .course-item { display: grid; grid-template-columns: 70px 150px minmax(0, 1fr) 160px; align-items: center; gap: 32px; min-height: 190px; padding-block: 28px; border-bottom: 1px solid var(--line-light); } .course-index { color: var(--clay); font-family: "Courier New", monospace; font-size: 11px; } .course-label { color: rgba(255, 255, 255, 0.52); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } .course-content { display: grid; grid-template-columns: minmax(180px, 0.55fr) minmax(260px, 1fr); align-items: center; gap: 40px; } .course-content h3 { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4vw, 58px); font-weight: 500; letter-spacing: -0.05em; } .course-content p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 13px; } .course-item > a { justify-self: end; display: flex; gap: 20px; font-size: 11px; font-weight: 700; } .membership { position: relative; overflow: hidden; padding-block: var(--section-space); background: var(--clay); color: var(--white); } /* Demi-terrain de tennis stylisé en fond de la section adhésion. Vue de dessus : le filet en haut (avec ses poteaux qui débordent), les lignes de côté et de fond formant le cadre, la ligne de service et le couloir central délimitant les deux carrés de service, plus la marque centrale sur la ligne de fond. Purement décoratif (aria-hidden), en retrait derrière la liste des avantages. */ .membership-court { position: absolute; top: clamp(44px, 8%, 104px); bottom: clamp(44px, 8%, 104px); left: 53%; right: clamp(24px, 5vw, 104px); opacity: 0.22; border: 2px solid var(--white); } .membership-court::before, .membership-court::after, .membership-court i::before, .membership-court i::after { content: ""; position: absolute; background: var(--white); } /* Filet : ligne du haut, un peu plus épaisse et débordant de chaque côté pour évoquer les poteaux. */ .membership-court::before { top: 0; left: -16px; right: -16px; height: 3px; transform: translateY(-1.5px); } /* Couloir central : vertical, du filet jusqu'à la ligne de service. */ .membership-court::after { top: 0; height: 54%; left: 50%; width: 2px; transform: translateX(-50%); } /* Ligne de service : horizontale, ferme le fond des deux carrés de service. */ .membership-court i::before { left: 0; right: 0; top: 54%; height: 2px; } /* Marque centrale sur la ligne de fond. */ .membership-court i::after { bottom: 0; left: 50%; width: 2px; height: 22px; transform: translateX(-50%); } .membership-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.62fr); align-items: end; gap: 10vw; } .membership h2, .competition h2 { font-size: clamp(54px, 7vw, 102px); } .membership-copy > p:not(.eyebrow) { max-width: 650px; margin: 30px 0 0; color: rgba(255, 255, 255, 0.78); } .button-cream { background: var(--cream); color: var(--forest-deep); } .button-cream:hover { background: var(--white); } .button-outline-light { border-color: rgba(255, 255, 255, 0.58); color: var(--white); } .button-outline-light:hover { background: var(--forest-deep); border-color: var(--forest-deep); } .benefit-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.42); } .benefit-list li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding-block: 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.42); font-family: var(--font-display); font-size: 18px; } .benefit-list span { color: rgba(255, 255, 255, 0.6); font-family: "Courier New", monospace; font-size: 10px; } .club-life { background: var(--paper); } .news-grid { display: grid; grid-template-columns: 1.25fr 0.8fr 0.8fr; gap: 18px; } .news-card { display: flex; flex-direction: column; min-width: 0; } .news-visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--forest); } .news-feature .news-visual { aspect-ratio: 4 / 3; } .news-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .news-card:hover .news-visual img { transform: scale(1.035); } .news-visual > span { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 10px; background: var(--cream); color: var(--ink); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .news-visual-clay { display: flex; align-items: center; justify-content: center; background: var(--clay); } .news-visual-clay::before, .news-visual-clay::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.45); } .news-visual-clay::before { width: 1px; height: 100%; } .news-visual-clay::after { width: 100%; height: 1px; } .news-visual-clay strong { position: relative; z-index: 1; color: var(--cream); font-family: var(--font-display); font-size: clamp(44px, 5vw, 76px); line-height: 0.82; letter-spacing: -0.08em; } .news-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; } .news-card h3 { margin: 16px 0 26px; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 34px); font-weight: 500; line-height: 1.14; letter-spacing: -0.04em; } .news-card > a { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--forest); font-size: 11px; font-weight: 700; } .competition { position: relative; overflow: hidden; background: var(--graphite); color: var(--white); } .competition::before { content: "MATCH"; position: absolute; right: -0.05em; bottom: -0.27em; color: rgba(255, 255, 255, 0.025); font-family: var(--font-display); font-size: 25vw; font-weight: 700; letter-spacing: -0.1em; } .competition-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.72fr); align-items: end; gap: 9vw; } .competition-heading > p:not(.eyebrow) { max-width: 620px; margin: 30px 0 0; color: rgba(255, 255, 255, 0.62); } .competition-heading .button { margin-top: 34px; } .competition-board { border-top: 1px solid var(--line-light); } .competition-board > div { display: grid; grid-template-columns: 1fr 0.75fr 54px; gap: 20px; align-items: center; min-height: 70px; border-bottom: 1px solid var(--line-light); font-size: 12px; } .competition-board .board-head { min-height: 42px; color: rgba(255, 255, 255, 0.42); font-family: "Courier New", monospace; font-size: 9px; text-transform: uppercase; } .competition-board strong { font-family: var(--font-display); font-size: 18px; font-weight: 500; } .competition-board .status { color: var(--sage); font-family: "Courier New", monospace; font-size: 9px; text-transform: uppercase; } .competition-board > p { margin: 18px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 10px; } .restaurant { background: var(--cream); } .restaurant-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.75fr); align-items: center; gap: 9vw; } .restaurant-photo { margin: 0; } .restaurant-photo img { width: 100%; min-height: 580px; object-fit: cover; } .restaurant-copy > p:not(.eyebrow) { margin: 30px 0; color: var(--muted); } .opening-hours { margin: 34px 0; border-top: 1px solid var(--line); } .opening-hours div { display: flex; justify-content: space-between; gap: 22px; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 12px; } .opening-hours dt { color: var(--muted); } .opening-hours dd { margin: 0; font-weight: 700; } .partners { padding-block: 80px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .partners-inner { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(500px, 1fr); align-items: end; gap: 80px; } .partners h2 { font-size: clamp(38px, 4vw, 58px); } .partner-logos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .partner-logos span { min-height: 120px; display: grid; place-items: center; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-family: "Courier New", monospace; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; } .contact { background: var(--paper); } .contact-layout { display: grid; grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1fr); gap: 8vw; } .contact-details { display: flex; flex-direction: column; gap: 28px; } .contact-details address, .contact-details > div:not(.map-placeholder) { display: grid; gap: 7px; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-style: normal; font-size: 13px; } .contact-details strong { font-family: var(--font-display); font-size: 22px; } .contact-details a { width: fit-content; color: var(--forest); font-weight: 700; } .map-placeholder { position: relative; min-height: 270px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; overflow: hidden; padding: 24px; background: var(--forest); color: var(--white); } .map-placeholder > span, .map-placeholder > a { position: relative; z-index: 2; } .map-placeholder > span { font-family: var(--font-display); font-size: 22px; } .map-placeholder > a { color: var(--sage); font-size: 11px; } .map-court { position: absolute; inset: 24px; border: 1px solid rgba(255, 255, 255, 0.25); } .map-court::before, .map-court::after, .map-court i::before, .map-court i::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.25); } .map-court::before { top: 50%; left: 0; right: 0; height: 1px; } .map-court::after { top: 0; bottom: 0; left: 50%; width: 1px; } .map-court i::before { top: 18%; bottom: 18%; left: 25%; width: 1px; } .map-court i::after { top: 18%; bottom: 18%; right: 25%; width: 1px; } .contact-form { padding: clamp(28px, 4vw, 54px); background: var(--cream); } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .field { display: grid; gap: 8px; margin-bottom: 24px; } .field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .field label span { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: normal; } .field input, .field select, .field textarea { width: 100%; min-height: 52px; border: 0; border-bottom: 1px solid rgba(23, 32, 29, 0.45); border-radius: 0; background: transparent; color: var(--ink); outline: 0; transition: border-color 160ms ease, background 160ms ease; } .field textarea { min-height: 140px; padding-top: 12px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--clay); background: rgba(255, 255, 255, 0.4); } .consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--muted); font-size: 11px; cursor: pointer; } .consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--forest); } .form-footer { display: flex; align-items: center; gap: 24px; margin-top: 30px; } .button-forest { border: 0; background: var(--forest); color: var(--white); } .button-forest:hover { background: var(--forest-deep); } .form-footer p { max-width: 270px; margin: 0; color: var(--muted); font-size: 10px; } .form-footer p a { color: var(--forest); text-decoration: underline; } .form-status { display: none; margin: 20px 0 0; padding: 12px 14px; border-left: 3px solid var(--clay); background: var(--paper); font-size: 12px; } .form-status.is-visible { display: block; } .form-status.is-error { border-left-color: var(--clay-dark); background: rgba(145, 59, 38, 0.09); } .faq { background: var(--cream); border-top: 1px solid var(--line); } .faq-layout { display: grid; grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1fr); gap: 9vw; } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-display); font-size: clamp(18px, 2vw, 25px); font-weight: 500; list-style: none; cursor: pointer; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary span { color: var(--clay); font-size: 28px; transition: transform 180ms ease; } .faq-list details[open] summary span { transform: rotate(45deg); } .faq-list details p { max-width: 700px; margin: -4px 50px 26px 0; color: var(--muted); } .site-footer { padding-top: 80px; background: var(--forest-deep); color: var(--white); } .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 0.65fr); gap: 70px; padding-bottom: 70px; } .brand-footer { margin-bottom: 28px; } .footer-brand > p { margin: 0; color: var(--sage); font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -0.05em; } .footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; } .footer-grid h2 { margin: 0 0 12px; color: rgba(255, 255, 255, 0.44); font-family: "Courier New", monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; } .footer-grid a, .footer-grid address { color: rgba(255, 255, 255, 0.72); font-size: 12px; font-style: normal; } .footer-grid a:hover { color: var(--sage); } .footer-bottom { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid var(--line-light); color: rgba(255, 255, 255, 0.42); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; } .footer-bottom p { margin: 0; } .footer-bottom > div { display: flex; gap: 20px; } .footer-bottom > p:last-child { text-align: right; } .back-to-top { position: fixed; z-index: 30; right: 20px; bottom: 20px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--clay); color: var(--white); font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease, background 180ms ease; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--forest); } .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== 19. COMPOSANTS DES PAGES INTÉRIEURES Ces composants réutilisent strictement les variables et le vocabulaire visuel de la maquette (angles droits, filets fins, labels monospace, accents terre battue). ========================================================================== */ /* --- 19.1 Hero des pages intérieures ------------------------------------- */ .page-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 520px; padding-top: 190px; padding-bottom: 70px; background: var(--forest-deep); color: var(--white); } .page-hero-media, .page-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .page-hero-media { object-fit: cover; object-position: center; } .page-hero-shade { background: linear-gradient(90deg, rgba(9, 37, 31, 0.95) 0%, rgba(9, 37, 31, 0.78) 48%, rgba(9, 37, 31, 0.42) 100%), linear-gradient(0deg, rgba(9, 37, 31, 0.9) 0%, transparent 55%); } .page-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.6fr); align-items: end; gap: 48px; } .page-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(46px, 6vw, 88px); font-weight: 500; line-height: 0.96; letter-spacing: -0.055em; text-wrap: balance; } .page-hero h1 em { color: var(--sage); font-style: normal; } .page-hero-lede { margin: 0 0 6px; color: rgba(255, 255, 255, 0.76); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; } /* --- 19.2 Fil d'Ariane --------------------------------------------------- */ .breadcrumb { margin-bottom: 26px; color: rgba(255, 255, 255, 0.55); font-family: "Courier New", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--clay); } .breadcrumb a:hover { color: var(--sage); } .breadcrumb [aria-current="page"] { color: var(--white); } /* --- 19.3 Blocs de texte ------------------------------------------------- */ .prose { max-width: 760px; } .prose > p { margin: 0 0 20px; color: var(--muted); } .prose > h3 { margin: 42px 0 14px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.035em; } .prose ul { margin: 0 0 22px; padding: 0; list-style: none; } .prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--muted); } .prose ul li::before { content: ""; position: absolute; top: 11px; left: 0; width: 12px; height: 1px; background: var(--clay); } .prose strong { color: var(--ink); } .prose a:not(.button):not(.text-link) { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* --- 19.4 Encart « à confirmer » ---------------------------------------- */ .callout { display: grid; gap: 8px; margin: 30px 0; padding: 20px 22px; border-left: 3px solid var(--clay); background: rgba(182, 83, 51, 0.07); font-size: 13px; } .callout p { margin: 0; color: var(--muted); } .callout strong { display: block; color: var(--ink); font-family: "Courier New", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } .callout-light { background: rgba(255, 255, 255, 0.07); } .callout-light p { color: rgba(255, 255, 255, 0.72); } .callout-light strong { color: var(--white); } .callout a { color: var(--forest); font-weight: 700; text-decoration: underline; } .callout-light a { color: var(--sage); } /* --- 19.5 Grille de cartes d'information -------------------------------- */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .info-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; background: var(--paper); } .quick-actions .info-card, .facilities .info-card, .faq .info-card { background: var(--cream); } .info-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.14; letter-spacing: -0.035em; } .info-card p { margin: 0; color: var(--muted); font-size: 13px; } .info-card ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; } .info-card ul li { padding-block: 8px; border-top: 1px solid var(--line); } .info-card > a { margin-top: auto; padding-top: 14px; color: var(--forest); font-size: 11px; font-weight: 700; } .info-card > a:hover { color: var(--clay); } .info-grid-spaced { margin-top: 28px; } /* Variante sur fond sombre */ .info-grid-dark { background: var(--line-light); border-color: var(--line-light); } .info-grid-dark .info-card { background: var(--forest-deep); color: var(--white); } .info-grid-dark .info-card p, .info-grid-dark .info-card ul { color: rgba(255, 255, 255, 0.64); } .info-grid-dark .info-card ul li { border-color: var(--line-light); } .info-grid-dark .info-card > a { color: var(--sage); } /* --- 19.6 Tableaux (tarifs, horaires) ----------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px; } .data-table caption { margin-bottom: 14px; color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; text-align: left; text-transform: uppercase; letter-spacing: 0.1em; } .data-table th, .data-table td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .data-table thead th { border-bottom-color: var(--ink); color: var(--muted); font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .data-table tbody th { font-family: var(--font-display); font-size: 17px; font-weight: 500; } .data-table td:last-child, .data-table th:last-child { padding-right: 0; text-align: right; white-space: nowrap; } .data-table .amount { font-family: var(--font-display); font-size: 18px; font-weight: 600; } /* --- 19.7 Liste de documents -------------------------------------------- */ .doc-list { border-top: 1px solid var(--line); } .doc-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding-block: 24px; border-bottom: 1px solid var(--line); transition: background var(--transition), padding var(--transition); } .doc-item:hover { padding-inline: 16px; background: var(--cream); } .doc-type { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--line); color: var(--clay); font-family: "Courier New", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; } .doc-body strong { display: block; font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: -0.03em; } .doc-body span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; } .doc-meta { justify-self: end; color: var(--forest); font-size: 11px; font-weight: 700; white-space: nowrap; } .doc-item:hover .doc-meta { color: var(--clay); } /* --- 19.8 Comité & rôles ------------------------------------------------- */ .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .role-card { display: grid; gap: 6px; align-content: start; padding: 28px 26px; background: var(--paper); } .role-card .mono-label { margin-bottom: 8px; } .role-card strong { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.03em; } .role-card span { color: var(--muted); font-size: 12px; } /* --- 19.9 Frise chronologique -------------------------------------------- */ .timeline { border-top: 1px solid var(--line); } .timeline > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 30px; padding-block: 26px; border-bottom: 1px solid var(--line); } .timeline dt { color: var(--clay); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; } .timeline dd { margin: 0; color: var(--muted); font-size: 14px; } /* --- 19.10 Galerie ------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .gallery figure { margin: 0; } .gallery img { width: 100%; height: 320px; object-fit: cover; } .gallery figcaption { padding-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } /* Image d'accompagnement en colonne latérale */ .aside-figure { margin: 0; } .aside-figure img { width: 100%; min-height: 320px; object-fit: cover; } .aside-figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } /* Emplacement image manquante — garde la composition sans photo inventée */ .image-placeholder { display: grid; place-items: center; gap: 6px; min-height: 320px; padding: 24px; border: 1px dashed var(--line); background: var(--cream); color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; } /* --- 19.11 Bandeau d'appel à l'action ------------------------------------ */ .cta-band { padding-block: clamp(64px, 7vw, 104px); background: var(--forest); color: var(--white); } .cta-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; } .cta-band h2 { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4vw, 58px); font-weight: 500; line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; } .cta-band p { max-width: 560px; margin: 20px 0 0; color: rgba(255, 255, 255, 0.72); } .cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* --- 19.12 Filtres d'actualités ------------------------------------------ */ .news-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter-button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .filter-button:hover { border-color: var(--forest); color: var(--forest); } .filter-button[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: var(--white); } .news-empty { padding: 40px 0; color: var(--muted); font-size: 14px; } .news-empty[hidden] { display: none; } /* --- 19.13 Article ------------------------------------------------------- */ .article-body { max-width: 760px; margin-inline: auto; } .article-body h2 { margin: 48px 0 16px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; } .article-body h3 { margin: 34px 0 12px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.03em; } .article-body p { margin: 0 0 22px; color: var(--muted); font-size: 16px; } .article-body figure { margin: 34px 0; } .article-body figcaption { padding-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: "Courier New", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; } /* --- 19.14 Page 404 & confirmation --------------------------------------- */ .status-page { display: grid; align-content: center; min-height: 68vh; padding-top: clamp(190px, 18vw, 260px); padding-bottom: clamp(90px, 12vw, 160px); background: var(--forest-deep); color: var(--white); } .status-page .shell { max-width: 780px; } .status-code { display: block; margin-bottom: 18px; color: var(--clay); font-family: "Courier New", monospace; font-size: 12px; letter-spacing: 0.16em; } .status-page h1 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 7vw, 84px); font-weight: 500; line-height: 0.98; letter-spacing: -0.055em; } .status-page p { max-width: 560px; margin: 26px 0 34px; color: rgba(255, 255, 255, 0.74); } .status-links { display: flex; flex-wrap: wrap; gap: 12px; } /* --- 19.15 État actif de navigation -------------------------------------- */ .main-nav a[aria-current="page"]::after { right: 0; } .footer-grid a[aria-current="page"] { color: var(--sage); } /* --- 19.16 Détails utiles ------------------------------------------------ */ .section-tight { padding-block: clamp(60px, 7vw, 96px); } .section-paper { background: var(--paper); } .section-cream { background: var(--cream); } .section-forest { background: var(--forest-deep); color: var(--white); } .section-forest .section-heading h2, .section-forest h2 { color: var(--white); } .section-forest .heading-split > p, .section-forest .prose > p { color: rgba(255, 255, 255, 0.62); } .stack { display: grid; gap: clamp(40px, 5vw, 70px); } .split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); } .split-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr); gap: clamp(40px, 6vw, 90px); } .privacy-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .privacy-note a { color: var(--forest); text-decoration: underline; } /* Titre de structure, masqué visuellement mais lu par les lecteurs d'écran */ .visually-hidden-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Honeypot antispam — masqué visuellement et pour les lecteurs d'écran */ .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (max-width: 1120px) { :root { --shell: min(100% - 42px, 1000px); } .header-inner { gap: 18px; } .main-nav { gap: 14px; } .main-nav a { font-size: 11px; } .header-cta { gap: 12px; padding-inline: 14px; } .hero-content { grid-template-columns: minmax(0, 1fr) 280px; gap: 46px; } .action-main { grid-template-columns: minmax(220px, 0.75fr) 1fr; } .course-item { grid-template-columns: 50px 110px minmax(0, 1fr) 120px; gap: 22px; } .course-content { grid-template-columns: 170px 1fr; gap: 24px; } .partners-inner { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1.3fr repeat(3, 0.75fr); gap: 36px; } } @media (max-width: 900px) { :root { --shell: min(100% - 36px, 760px); --section-space: 96px; } .club-notice { height: auto; min-height: 36px; } .notice-inner { justify-content: flex-start; padding-block: 8px; } .notice-inner a, .notice-kicker { display: none; } .site-header { top: 36px; } .header-inner { position: relative; grid-template-columns: auto 1fr auto; min-height: 82px; gap: 16px; } .brand-name { display: none; } .menu-toggle { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--white); cursor: pointer; } .menu-toggle-label { font-size: 11px; font-weight: 700; } .menu-toggle-lines { width: 24px; display: grid; gap: 6px; } .menu-toggle-lines i { display: block; height: 1px; background: currentColor; transition: transform 180ms ease; } .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); } .main-nav { grid-column: 1 / -1; align-self: start; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: calc(100svh - 82px); padding-block: 50px; } .js .main-nav { position: fixed; inset: 82px 0 0; z-index: -1; display: flex; padding-inline: 24px; background: var(--forest-deep); opacity: 0; visibility: hidden; transform: translateY(-16px); /* La visibilité bascule immédiatement à l'ouverture et seulement à la fin de l'animation à la fermeture : sans cela, le premier lien du menu ne peut pas recevoir le focus au moment de l'ouverture. */ transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; } .js .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s; } .main-nav a { font-family: var(--font-display); font-size: clamp(34px, 8vw, 54px); font-weight: 500; letter-spacing: -0.04em; } .main-nav a::after { display: none; } .header-cta { grid-column: 2; grid-row: 1; justify-self: end; } .menu-toggle { grid-column: 3; grid-row: 1; } .hero { min-height: 900px; } .hero-content { grid-template-columns: 1fr; align-items: end; gap: 42px; padding-top: 170px; padding-bottom: 190px; } .hero-card { width: min(100%, 420px); justify-self: end; display: none; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .metric-grid > div { min-height: 94px; padding: 14px 18px; } .metric-grid > div:nth-child(n+3) { border-top: 1px solid var(--line-light); } .metric-grid > div:nth-child(odd) { border-left: 1px solid var(--line-light); } .metric-grid strong { font-size: 30px; } .heading-split, .story-layout, .membership-layout, .competition-layout, .restaurant-layout, .contact-layout, .faq-layout { grid-template-columns: 1fr; gap: 54px; } .story-figure { grid-row: auto; } .story-figure img { min-height: 440px; } .facility-mosaic { grid-template-columns: 1fr 1fr; } .facility-wide { grid-column: 1 / -1; } .facility-tall { grid-row: auto; } .facility, .facility-wide { min-height: 380px; } .course-item { grid-template-columns: 46px 1fr auto; gap: 20px; padding-block: 36px; } .course-label { display: none; } .course-content { grid-template-columns: 1fr; gap: 8px; } .course-item > a { writing-mode: vertical-rl; } .membership-court { top: auto; left: clamp(20px, 6vw, 60px); right: clamp(20px, 6vw, 60px); bottom: clamp(28px, 6vw, 60px); height: min(48%, 340px); } .news-grid { grid-template-columns: 1.25fr 1fr; } .news-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .news-card:last-child .news-visual { grid-row: 1 / span 4; aspect-ratio: 4 / 3; } .restaurant-photo img { min-height: 500px; } .partner-logos { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-grid > div:last-child { grid-column: 2; } .footer-bottom { grid-template-columns: 1fr auto; padding-block: 20px; } .footer-bottom > p:last-child { grid-column: 1 / -1; text-align: left; } /* Pages intérieures */ .page-hero { min-height: 460px; padding-top: 168px; padding-bottom: 56px; } .page-hero-inner, .cta-band-inner, .split-2, .split-aside { grid-template-columns: 1fr; gap: 34px; } .timeline > div { grid-template-columns: 118px minmax(0, 1fr); gap: 20px; } .doc-item { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; } .doc-meta { grid-column: 2; justify-self: start; } } @media (max-width: 620px) { :root { --shell: calc(100% - 28px); --section-space: 76px; } html { scroll-padding-top: 82px; } .notice-inner { font-size: 9px; } .header-inner { gap: 10px; } .brand-mark { width: 42px; height: 42px; } .header-cta { min-height: 42px; padding-inline: 12px; } .header-cta span { display: none; } .menu-toggle-label { display: none; } .hero { min-height: 820px; } .hero-shade { background: linear-gradient(0deg, rgba(9, 37, 31, 0.96) 8%, rgba(9, 37, 31, 0.5) 80%), linear-gradient(90deg, rgba(9, 37, 31, 0.75), transparent); } .hero-content { padding-top: 160px; padding-bottom: 210px; } .hero h1 { font-size: clamp(48px, 14vw, 68px); } .hero h1 br { display: none; } .hero h1 em::before { content: "\00a0"; } .hero-lede { font-size: 15px; } .hero-actions, .membership-actions { align-items: stretch; flex-direction: column; } .button { width: 100%; } .metric-grid span { font-size: 8px; } .section-heading h2, .story-intro h2, .restaurant h2, .partners h2, .faq h2 { font-size: clamp(40px, 12vw, 58px); } .action-row { grid-template-columns: 44px 1fr 32px; min-height: 116px; } .action-main { display: block; } .action-main strong { display: block; font-size: 24px; } .action-main small { display: block; margin-top: 5px; font-size: 11px; } .action-row:hover { padding-inline: 8px; } .story-layout { gap: 42px; } .story-figure img { min-height: 260px; } .facility-mosaic { grid-template-columns: 1fr; } .facility-wide { grid-column: auto; } .facility, .facility-wide { min-height: 330px; } .facility figcaption { align-items: flex-start; flex-direction: column; } .facility figcaption span { text-align: left; } .facility-note { grid-template-columns: 60px 1fr; padding: 24px; } .course-item { grid-template-columns: 32px 1fr; gap: 12px; } .course-item > a { grid-column: 2; justify-self: start; writing-mode: initial; margin-top: 12px; } .membership h2, .competition h2 { font-size: clamp(48px, 14vw, 68px); } .news-grid { grid-template-columns: 1fr; } .news-card:last-child { grid-column: auto; display: flex; } .news-card:last-child .news-visual { aspect-ratio: 4 / 3; } .news-card .news-visual { aspect-ratio: 4 / 3; } .competition-layout { gap: 60px; } .competition-board > div { grid-template-columns: 1fr 0.8fr 44px; gap: 10px; } .restaurant-photo img { min-height: 380px; } .partner-logos { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; gap: 0; } .form-footer { align-items: stretch; flex-direction: column; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-grid > div:last-child { grid-column: auto; } .footer-bottom { grid-template-columns: 1fr; gap: 10px; } .footer-bottom > div { flex-wrap: wrap; } .footer-bottom > p:last-child { grid-column: auto; } .back-to-top { right: 14px; bottom: 14px; } /* Pages intérieures */ .page-hero { min-height: 400px; padding-top: 150px; padding-bottom: 46px; } .page-hero h1 { font-size: clamp(38px, 12vw, 54px); } .page-hero h1 br { display: none; } .timeline > div { grid-template-columns: 1fr; gap: 6px; } .gallery img, .image-placeholder { height: 260px; min-height: 260px; } .data-table { min-width: 380px; } .doc-item:hover { padding-inline: 8px; } .cta-band-actions .button { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } }