/* Theme Name: Handisport 13 Theme URI: https://handisport13.fr Author: CD Handisport 13 Description: Thème sur-mesure "Force & Territoire" pour le Comité Départemental Handisport des Bouches-du-Rhône. Actualités et Clubs gérables depuis l'administration WordPress. Version: 1.18.9 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: handisport13 */ /* ========================================================================== 1. VARIABLES & RESET ========================================================================== */ :root { /* Palette CDH13 : bleu (structure) + rouge (accent/énergie) + or (mise en valeur) */ --navy: #013974; /* bleu foncé — en-tête, fonds sombres */ --navy-light: #0069c0; /* bleu moyen — hover, boutons secondaires */ --navy-dark: #012a56; /* bleu très foncé — pied de page */ --red: #E4312B; /* rouge vif — accents, liens, soulignés, CTA */ --red-dark: #B5231E; /* rouge foncé — survol */ --gold: #e9b200; /* jaune/or officiel — libellés et chiffres mis en valeur sur fond sombre */ --ffh-green: #8CAB6B; /* vert pistache (logo FFH, « l'espoir ») — cartes "classiques" au survol */ --ffh-green-deep: #52672F; /* variante plus soutenue de ce même pistache, utilisée en fond sous du texte blanc (contraste) */ --quiz-accent: #1CA7B0; /* turquoise dédié au Quiz uniquement — distinct du rouge/or/vert déjà pris ailleurs */ --quiz-accent-deep: #158089; /* variante plus soutenue, pour les fonds avec texte blanc */ --concrete: oklch(0.94 0.005 260); --concrete-light: oklch(0.97 0.005 260); --border-c: oklch(0.88 0.01 260); --gray-500: oklch(0.52 0.02 260); --gray-400: oklch(0.6 0.02 260); --font-display: 'Oswald', sans-serif; --font-body: 'Source Sans 3', sans-serif; /* Largeur "boxée" du site : au-delà de cette largeur d'écran, un dégradé animé apparaît sur les côtés */ --site-max-width: 1600px; /* Surfaces & texte — indirection pour permettre le mode sombre sans dupliquer les règles */ --surface: #ffffff; --surface-alt: #f8f9fa; --text-main: oklch(0.18 0.04 260); --text-muted: var(--gray-500); } :root[data-theme="dark"] { --surface: #0d1b2a; --surface-alt: #13273d; --text-main: #eef2f6; --text-muted: #9fb0c0; --border-c: #2a3d52; --concrete: #16283b; --concrete-light: #10202f; --gray-400: #5c7185; } :root[data-theme="dark"] img:not(.testimonial-photo):not(.club-logo):not(.partner-logo img) { filter: brightness(.92); } [data-theme="dark"] .presentation, [data-theme="dark"] .sports-section { background: var(--surface); } [data-theme="dark"] .sport-card, [data-theme="dark"] .actu-card, [data-theme="dark"] .club-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .contact-form-wrap, [data-theme="dark"] .pret-info-box, [data-theme="dark"] .pret-table-wrap, [data-theme="dark"] .pret-table tbody tr:nth-child(even), [data-theme="dark"] .membre-card { background: var(--surface-alt); border-color: var(--border-c); color: var(--text-main); } [data-theme="dark"] .pret-qty-input { background: var(--surface); color: var(--text-main); border-color: var(--border-c); } [data-theme="dark"] .club-filters select, [data-theme="dark"] .club-filters button, [data-theme="dark"] .testimonials-nav, [data-theme="dark"] .a11y-textctl button, [data-theme="dark"] .a11y-reset { background: var(--surface-alt); color: var(--text-main); border-color: var(--border-c); } [data-theme="dark"] .a11y-panel, [data-theme="dark"] .a11y-panel-head { background: var(--surface); color: var(--text-main); border-color: var(--border-c); } [data-theme="dark"] .site-header { background: var(--surface); border-color: var(--border-c); } [data-theme="dark"] .sport-card h3, [data-theme="dark"] .actu-card h3, [data-theme="dark"] .club-card h3, [data-theme="dark"] .membre-card h3 { color: var(--text-main); } [data-theme="dark"] .actu-card .excerpt, [data-theme="dark"] .club-card .meta, [data-theme="dark"] .membre-card p { color: var(--text-muted); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; } @media (min-width: 1024px) { html { scroll-padding-top: 5.5rem; } } body { margin: 0; font-family: var(--font-body); color: var(--text-main); background: var(--surface); -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; } p { margin: 0; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } .container { width: 100%; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; max-width: 1280px; } } /* ========================================================================== 1bis. MISE EN PAGE "BOXÉE" + FOND DÉGRADÉ ANIMÉ ========================================================================== */ /* Fond plein écran, fixe, derrière tout le site : visible uniquement dans les marges latérales une fois le site réduit en largeur (.site-shell ci-dessous). */ .site-bg { position: fixed; inset: 0; z-index: -1; background: linear-gradient( 120deg, var(--navy-dark), var(--navy), var(--navy-light), var(--navy), var(--red-dark), var(--navy-dark) ); background-size: 400% 400%; animation: siteBgShift 30s ease-in-out infinite; } :root[data-theme="dark"] .site-bg { background: linear-gradient( 120deg, #000c1a, var(--navy-dark), var(--navy), var(--navy-dark), #000c1a ); background-size: 400% 400%; } @keyframes siteBgShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .site-bg { animation: none; } } /* Conteneur qui réduit le site sur les grands écrans : au-delà de --site-max-width, le fond dégradé animé de .site-bg apparaît dans les marges latérales. */ .site-shell { position: relative; z-index: 1; max-width: var(--site-max-width); margin: 0 auto; background: var(--surface); min-height: 100vh; box-shadow: 0 0 80px rgba(0, 0, 0, .25); } /* Le header étant en position fixed (donc hors du flux de .site-shell), on lui applique la même largeur maximale pour qu'il reste aligné avec le reste du site. */ .site-header { max-width: var(--site-max-width); margin: 0 auto; } .uppercase { text-transform: uppercase; } /* Eyebrow / kicker */ .kicker { display:flex; align-items:center; gap:0.75rem; margin-bottom: 0.75rem; } .kicker .bar { height:2px; width:2.5rem; background: var(--red); display:block; } .kicker span.label { color: var(--red-dark); font-size: 0.75rem; font-weight:600; letter-spacing: 0.2em; text-transform: uppercase; } .kicker.on-dark .label { color: var(--gold); } .kicker.center { justify-content:center; } /* Fade up animation */ .fade-up { opacity:0; transform: translateY(24px); animation: fadeUp .6s cubic-bezier(.23,1,.32,1) forwards; } @keyframes fadeUp { to { opacity:1; transform: translateY(0); } } /* ========================================================================== 2. NAVBAR ========================================================================== */ .site-header { position: fixed; top:0; left:0; right:0; z-index: 999; transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; background: linear-gradient(to bottom, rgba(1,42,86,.45), rgba(1,42,86,.15) 70%, transparent); } .site-header.is-scrolled { background: var(--header-bg, color-mix(in oklch, var(--navy) 95%, transparent)); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,.15); } .site-header .container { display:flex; align-items:center; justify-content:space-between; height: 4rem; } @media (min-width: 1024px) { .site-header .container { height: 5rem; } } .brand { display:flex; align-items:center; gap: 0.75rem; } .brand-mark { position:relative; display:flex; align-items:center; } .brand-mark .cd, .brand-mark .h, .brand-mark .n13 { color:#fff; font-weight:700; line-height:1; font-size:1.6rem; letter-spacing:-0.02em; } .brand-mark .h-wrap { position:relative; display:inline-block; margin:0 2px; } .brand-mark .slash { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform: rotate(-20deg); pointer-events:none; } .brand-mark .slash i { display:block; width:2px; height:1.5rem; background: var(--red); margin-left:2px; } .brand-mark .n13 { color: var(--gold); } .brand-sub { margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid rgba(255,255,255,.2); display:none; } @media (min-width:640px){ .brand-sub{ display:block; } } .brand-sub div { font-family: var(--font-body); font-size:0.6rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.2; color: rgba(255,255,255,.8); } .brand-sub div.gold { color: var(--gold); } .main-nav { display:none; align-items:center; gap:0; } @media (min-width:1240px){ .main-nav{ display:flex; } } .main-nav a { position:relative; color: var(--header-text, rgba(255,255,255,.9)); padding:0.5rem 0.55rem; font-size:0.8125rem; font-family: var(--font-display); letter-spacing:0.03em; transition: color .15s; white-space:nowrap; } .main-nav a:hover { color: var(--gold); } .main-nav a.nav-newsletter { display:flex; align-items:center; gap:0.3rem; color: var(--gold); font-weight:600; } .main-nav a.nav-newsletter:hover { color:#fff; } .main-nav a.nav-newsletter::after { background: var(--gold); } .main-nav a.nav-quiz { background: var(--quiz-accent-deep); color:#fff !important; font-weight:700; border-radius:999px; padding:0.45rem 0.9rem !important; margin-left:0.35rem; transition: transform .15s ease, box-shadow .15s ease; } .main-nav a.nav-quiz:hover { transform: translateY(-1px); box-shadow:0 6px 14px rgba(28,167,176,.35); color:#fff; } .main-nav a.nav-quiz::after { content:none; } .main-nav a::after { content:''; position:absolute; left:0.55rem; right:0.55rem; bottom:0; height:2px; background: var(--red); transform: scaleX(0); transition: transform .2s; transform-origin:left; } .main-nav a:hover::after { transform: scaleX(1); } .header-actions { display:flex; align-items:center; gap:0.75rem; } .btn-support { display:none; align-items:center; gap:0.4rem; background: var(--red); color:#fff; padding:0.5rem 0.9rem; font-size:0.8125rem; font-weight:600; letter-spacing:0.03em; font-family: var(--font-display); transition: background .2s; white-space:nowrap; } @media (min-width:768px){ .btn-support{ display:flex; } } .btn-support:hover { background: var(--red-dark); } .nav-toggle { display:flex; color:#fff; background:none; border:0; padding:0.5rem; } @media (min-width:1240px){ .nav-toggle{ display:none; } } .mobile-nav { display:none; background: var(--header-bg, var(--navy)); border-top:1px solid rgba(255,255,255,.1); } .mobile-nav.is-open { display:block; } .mobile-nav a { display:block; position:relative; padding: 0.75rem 1.5rem; color: var(--header-text, rgba(255,255,255,.9)); font-family: var(--font-display); letter-spacing:0.05em; border-bottom:1px solid rgba(255,255,255,.05); transition: color .2s, padding-left .2s, background-color .2s; } .mobile-nav a::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--red); transform: scaleY(0); transform-origin:top; transition: transform .2s; } .mobile-nav a:hover, .mobile-nav a:focus-visible, .mobile-nav a:active { color:#fff; padding-left:1.75rem; background: rgba(255,255,255,.04); } .mobile-nav a:hover::before, .mobile-nav a:focus-visible::before, .mobile-nav a:active::before { transform: scaleY(1); } .mobile-nav a.nav-newsletter { color: var(--gold); font-weight:700; } .mobile-nav .mobile-support { padding:1rem; display:flex; flex-direction:column; gap:0.6rem; } .mobile-nav .mobile-support a { display:flex; align-items:center; justify-content:center; gap:0.5rem; background: var(--red); color:#fff; font-weight:600; padding: 0.75rem; border:none; } .mobile-nav .mobile-support a.btn-benevole { background: var(--navy-light); } /* ---------- Sous-menus (pages "glissantes" au survol d'un lien du menu) ---------- Un lien du menu principal devient un menu déroulant dès qu'on lui donne des sous-pages dans Apparence > Menus (glisser un élément sous un autre, en retrait). Couleurs réglables dans Réglages du site > Couleurs. */ .nav-item { position:relative; display:flex; align-items:center; } .nav-caret { display:inline-flex; margin-left:3px; opacity:.75; transition: transform .2s; } .nav-item.has-submenu:hover .nav-caret, .nav-item.has-submenu:focus-within .nav-caret { transform: rotate(180deg); } @media (min-width:1240px) { .main-nav .sub-menu { list-style:none; position:absolute; top:100%; left:0; min-width:220px; margin:0; padding:0.5rem 0; background: var(--submenu-bg, var(--navy-dark)); box-shadow: 0 12px 28px rgba(0,0,0,.22); opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:1000; } .main-nav .nav-item.has-submenu:hover .sub-menu, .main-nav .nav-item.has-submenu:focus-within .sub-menu { opacity:1; visibility:visible; transform: translateY(0); } .main-nav .sub-menu a { display:block; padding:0.6rem 1.1rem; font-size:0.8125rem; white-space:nowrap; color: var(--submenu-text, rgba(255,255,255,.85)); } .main-nav .sub-menu a::after { display:none; } /* pas de soulignement animé dans le sous-menu */ .main-nav .sub-menu a:hover, .main-nav .sub-menu a:focus-visible { color: var(--gold); background: rgba(255,255,255,.06); } } /* Mobile : pas de survol possible, donc les sous-pages restent affichées en retrait sous leur page parente, sans dérouler/replier. */ .mobile-nav .sub-menu { list-style:none; margin:0; padding:0; background: rgba(0,0,0,.15); } .mobile-nav .sub-menu a { padding-left:2.5rem; font-size:0.9em; } .mobile-nav .nav-caret { display:none; } /* ---------- Lien actif dans le menu (organigramme / clubs / actualités) ---------- */ .main-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--gold); } .main-nav a[aria-current="page"]::after { transform: scaleX(1); } /* ---------- Accessibilité : lien d'évitement + focus clavier visible ---------- */ .screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:1rem; top:-4rem; z-index:2000; background:#fff; color: var(--navy); padding:0.75rem 1.25rem; font-family: var(--font-display); font-weight:600; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.25); transition: top .2s; } .skip-link:focus { top:1rem; } .site-header a:focus-visible, .site-header button:focus-visible { outline-color:#fff; } /* ---------- Recherche du site (icône + panneau déroulant dans l'en-tête) ---------- */ .search-toggle { display:flex; align-items:center; color:#fff; background:none; border:0; padding:0.5rem; } .site-search { max-height:0; overflow:hidden; background: var(--navy-dark); transition: max-height .25s ease; } .site-search.is-open { max-height:5rem; } .site-search-inner { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1rem; } .site-search-inner input[type="search"] { flex:1; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff; padding:0.6rem 0.9rem; border-radius:4px; font-size:0.9375rem; } .site-search-inner input[type="search"]::placeholder { color: rgba(255,255,255,.5); } .site-search-inner button { background: var(--red); color:#fff; border:0; padding:0.6rem 0.9rem; border-radius:4px; display:flex; } .site-search-inner button:hover { background: var(--red-dark); } /* ---------- Fil d'Ariane ---------- */ .breadcrumbs { margin-bottom:1rem; } .breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; list-style:none; margin:0; padding:0; } .breadcrumbs li { display:flex; align-items:center; gap:0.4rem; font-size:0.8125rem; color: rgba(255,255,255,.65); } .breadcrumbs li:not(:last-child)::after { content:'/'; margin-left:0.4rem; color: rgba(255,255,255,.35); } .breadcrumbs a { color: rgba(255,255,255,.85); text-decoration:underline; } .breadcrumbs a:hover { color: var(--gold); } .breadcrumbs [aria-current="page"] { color: rgba(255,255,255,.65); } /* ========================================================================== 3. HERO ========================================================================== */ .hero { position:relative; min-height: clamp(480px, 70vh, 720px); display:flex; align-items:center; overflow:hidden; } .hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; } .hero-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-overlay-1 { position:absolute; inset:0; background: linear-gradient(to right, color-mix(in oklch, var(--navy) var(--voile-1, 55%), transparent), color-mix(in oklch, var(--navy) var(--voile-2, 30%), transparent), transparent); } .hero-overlay-2 { position:absolute; inset:0; background: linear-gradient(to top, color-mix(in oklch, var(--navy) var(--voile-3, 45%), transparent), transparent, transparent); } .hero-accent { position:absolute; left:0; top:0; bottom:0; width:6px; background: var(--red); z-index:2; } .hero .container { position:relative; z-index:10; padding-top:6rem; padding-bottom:4rem; } .hero-content { max-width: 48rem; } .hero h1 { color:#fff; font-weight:700; line-height:1; margin-bottom:1.5rem; font-size: clamp(3rem, 8vw, 6rem); letter-spacing:-0.01em; } .hero h1 .red { color: var(--red); } .hero p.lead { color: rgba(255,255,255,.8); font-size:1.125rem; margin-bottom:2.5rem; max-width:36rem; line-height:1.6; font-family: var(--font-body); } @media (min-width:768px){ .hero p.lead{ font-size:1.25rem; } } .hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; } .btn { display:inline-flex; align-items:center; gap:0.5rem; padding:1rem 2rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:0.875rem; font-family: var(--font-display); transition: all .2s; border: 2px solid transparent; } .btn:active { transform: scale(0.96); } .btn-red { background: var(--red); color:#fff; } .btn-red:hover { background: var(--red-dark); } .btn-outline-white { border-color: rgba(255,255,255,.6); color:#fff; } .btn-outline-white:hover { border-color:#fff; background: rgba(255,255,255,.1); } .btn-outline-navy { border-color: var(--navy); color: var(--navy); } .btn-outline-navy:hover { background: var(--navy); color:#fff; } .btn-navy { background: var(--navy); color:#fff; } .btn-navy:hover { background: var(--navy-light); } .btn-gold { background: var(--gold); color: var(--navy); } .btn-gold:hover { background: #d1a300; } .section-head .underline-bar { height:3px; width:4rem; background: var(--red); margin:0.75rem auto 0; } .scroll-indicator { position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); color: rgba(255,255,255,.6); background:none; border:0; animation: bounce 2s infinite; } .scroll-indicator:hover { color:#fff; } @keyframes bounce { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,-8px);} } /* ========================================================================== 4. STATS ========================================================================== */ .stats-section { position:relative; background: var(--navy); padding: 4rem 0; overflow:hidden; border-top: 3px solid var(--gold); } .stats-texture { position:absolute; inset:0; opacity:.05; pointer-events:none; background-image: repeating-linear-gradient(45deg, #fff 0px, #fff 1px, transparent 1px, transparent 12px); } .stats-header { text-align:center; margin-bottom:2.25rem; position:relative; z-index:1; } .stats-header h2 { color:#fff; font-weight:700; font-size:2.5rem; letter-spacing:0.02em; } .stats-header .updated { color: color-mix(in oklch, var(--gold) 60%, transparent); font-size:0.75rem; margin-top:0.5rem; } .stats-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: rgba(255,255,255,.05); position:relative; z-index:1; } @media (min-width:1024px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } } .stat-card { background: var(--navy); padding:1.5rem; text-align:center; transition: background .3s; } .stat-card:hover { background: var(--navy-light); } .stat-card .icon { margin-bottom:0.75rem; display:flex; justify-content:center; color: var(--gold); } .stat-card .value { color: var(--gold); font-weight:700; line-height:1; margin-bottom:0.5rem; font-size: clamp(2.5rem,5vw,4rem); } .stat-card .label { color:#fff; font-weight:600; letter-spacing:0.1em; font-size:0.875rem; margin-bottom:0.25rem; } .stat-card .sub { color: rgba(255,255,255,.5); font-size:0.75rem; } /* ========================================================================== 5. PRESENTATION ========================================================================== */ .presentation { padding:4rem 0; background:#fff; position:relative; overflow:hidden; } .presentation .watermark { position:absolute; right:0; top:50%; transform: translateY(-50%); color: color-mix(in oklch, var(--navy) 3%, transparent); font-weight:700; line-height:1; font-size:28rem; pointer-events:none; user-select:none; } .presentation-grid { display:grid; grid-template-columns: 1fr; gap:4rem; align-items:center; position:relative; z-index:1; } @media (min-width:1024px){ .presentation-grid{ grid-template-columns: 1fr 1fr; } } .presentation-media { position:relative; } .presentation-media .frame { position:absolute; top:-1rem; left:-1rem; width:100%; height:100%; border:2px solid var(--red); max-width: calc(100% - 1rem); } .presentation-media img { position:relative; z-index:1; width:100%; object-fit:cover; aspect-ratio: 4/3; } .presentation-media .badge { position:absolute; bottom:1.5rem; right:1.5rem; z-index:2; background: var(--navy); color:#fff; padding:1.25rem; box-shadow: 0 10px 25px rgba(0,0,0,.2); } .presentation-media .badge .n { color: var(--gold); font-weight:700; line-height:1; font-size:2.5rem; } .presentation-media .badge .l { color: rgba(255,255,255,.7); font-size:0.75rem; letter-spacing:0.2em; margin-top:0.25rem; } .presentation-video { margin-top:2rem; position:relative; z-index:1; } .video-embed { position:relative; width:100%; aspect-ratio:16/9; background:#000; } .video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .video-caption { color: var(--navy); font-weight:600; font-size:0.875rem; margin-top:0.75rem; margin-bottom:0; } .presentation h2 { color: var(--navy); font-weight:700; margin-bottom:1.5rem; font-size: clamp(2rem,4vw,3rem); line-height:1.05; } .presentation p { color: oklch(0.45 0.02 260); line-height:1.7; margin-bottom:1rem; } .values-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:2rem; } .value-item { border-left:2px solid var(--red); padding-left:1rem; } .value-item svg { color: var(--navy); margin-bottom:0.5rem; } .value-item .t { font-weight:700; color: var(--navy); font-size:0.875rem; margin-bottom:0.25rem; } .value-item .d { color: var(--gray-400); font-size:0.75rem; line-height:1.5; } /* ========================================================================== 6. SPORTS ========================================================================== */ .sports-section { padding:4rem 0; background: var(--concrete-light); position:relative; overflow:hidden; } .sports-accent { position:absolute; left:0; top:0; width:4px; height:100%; background: var(--red); } .section-head { text-align:center; margin-bottom:2.5rem; } .section-head h2 { color: var(--navy); font-weight:700; margin-bottom:1rem; font-size: clamp(2rem,5vw,3.5rem); position:relative; display:inline-block; } .section-head h2 .underline { position:absolute; left:0; right:0; bottom:-4px; height:4px; background: var(--red); } .section-head p { color: var(--gray-500); max-width:42rem; margin:0 auto; } .sports-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:0.75rem; } @media (min-width:640px){ .sports-grid{ grid-template-columns: repeat(3,1fr);} } @media (min-width:768px){ .sports-grid{ grid-template-columns: repeat(4,1fr);} } @media (min-width:1024px){ .sports-grid{ grid-template-columns: repeat(6,1fr);} } .sport-card { position:relative; padding:1.25rem; text-align:center; border:1px solid var(--border-c); background:#fff; transition: all .3s; } .sport-card:hover { background: var(--navy); border-color: var(--navy); box-shadow: 0 10px 25px rgba(0,0,0,.15); transform: translateY(-4px); } .sport-card .emoji { font-size:1.875rem; margin-bottom:0.75rem; } .sport-card .name { font-family: var(--font-display); font-weight:600; font-size:0.875rem; letter-spacing:0.02em; color: var(--navy); transition: color .2s; } .sport-card:hover .name { color:#fff; } .sport-card.has-photo { background-size:cover; background-position:center; border-color:transparent; color:#fff; position:relative; } .sport-card.has-photo::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(1,57,116,.85), rgba(1,57,116,.25)); } .sport-card.has-photo .name { position:relative; z-index:1; color:#fff; } .sport-card.has-photo:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.25); } .sports-section .cta-wrap { text-align:center; margin-top:2.5rem; } /* ========================================================================== 7. ACTUALITES ========================================================================== */ .actus-section { padding:4rem 0; background:#fff; position:relative; overflow:hidden; } .actus-section .watermark { position:absolute; right:0; top:0; transform: translateY(-20%); color: color-mix(in oklch, var(--navy) 3%, transparent); font-weight:700; font-size:18rem; line-height:1; pointer-events:none; user-select:none; } .actus-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; flex-wrap:wrap; gap:1rem; position:relative; z-index:1;} .actus-header h2 { color: var(--navy); font-weight:700; font-size:2.5rem; } .link-more { display:none; align-items:center; gap:0.5rem; color: var(--navy); font-weight:600; font-size:0.875rem; letter-spacing:0.05em; font-family: var(--font-display); } @media (min-width:768px){ .link-more{ display:flex; } } .link-more:hover { color: var(--red-dark); } .actus-grid { display:grid; grid-template-columns: 1fr; gap:1.5rem; position:relative; z-index:1; } @media (min-width:768px){ .actus-grid{ grid-template-columns: repeat(2,1fr);} } @media (min-width:1024px){ .actus-grid{ grid-template-columns: repeat(4,1fr);} } .actu-card { display:block; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: all .3s; } .actu-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.15); transform: translateY(-4px); } .actu-card.featured { grid-column: span 2; } .actu-card .thumb { height:11rem; overflow:hidden; } .actu-card.featured .thumb { height:16rem; } .actu-card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .5s; } .actu-card:hover .thumb img { transform: scale(1.05); } .actu-card .body { padding:1.25rem; } .actu-card .meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; flex-wrap:wrap; } .actu-tag { font-size:0.75rem; font-weight:700; padding:0.125rem 0.5rem; letter-spacing:0.02em; font-family: var(--font-display); background: var(--concrete); color: var(--navy); } .actu-date { display:flex; align-items:center; gap:0.25rem; font-size:0.75rem; color: var(--gray-400); } .actu-card h3 { color: var(--navy); font-weight:600; margin-bottom:0.5rem; font-size:1.1rem; line-height:1.35; transition: color .2s; } .actu-card:hover h3 { color: var(--red-dark); } .actu-card .excerpt { color: var(--gray-500); font-size:0.875rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .actu-card .readmore { display:flex; align-items:center; gap:0.25rem; margin-top:1rem; color: var(--red-dark); font-weight:600; font-size:0.875rem; } /* Flux "À la une" (Actualités) */ .alu-links { display:flex; gap:1.25rem; flex-wrap:wrap; } .actu-type-badge { font-size:0.7rem; font-weight:700; padding:0.2rem 0.55rem; letter-spacing:0.03em; text-transform:uppercase; font-family: var(--font-display); border-radius:3px; } .actu-type-news { background: var(--concrete); color: var(--navy); } /* ========================================================================== 8. ACTIONS ========================================================================== */ .actions-section { /* Palette dédiée à "Nos actions" uniquement — orange vif / or flashy / violet-framboise. Choisie pour rester punchy tout en s'accordant avec le bleu marine du site (l'orange est la couleur complémentaire du bleu, le violet-framboise partage une base plus froide qui ne jure pas à côté du navy — contrairement au fuchsia pur essayé précédemment). Variables locales à cette section : elles ne redéfinissent aucune variable globale (--navy, --red, --gold, --ffh-green restent inchangées partout ailleurs sur le site). */ --actions-terracotta: #FF6A1A; --actions-terracotta-deep: #D6540E; --actions-ambre: #FFC400; --actions-ambre-deep: #D6A300; --actions-corail: #A31E8C; --actions-corail-deep: #7E1670; --actions-accent: #FFC400; position:relative; padding:4rem 0; overflow:hidden; clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); margin-top:-2rem; } .actions-bg { position:absolute; inset:0; background-size:cover; background-position:center; } .actions-overlay { position:absolute; inset:0; background: color-mix(in oklch, var(--navy) 85%, transparent); } .actions-section .container { position:relative; z-index:1; } .actions-grid { display:grid; grid-template-columns:1fr; gap:1rem; } @media (min-width:640px){ .actions-grid{ grid-template-columns: repeat(2,1fr);} } @media (min-width:1024px){ .actions-grid{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr));} } .action-card { display:block; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); padding:1.5rem; transition: all .3s; } .action-card:hover { transform: translateY(-4px); } .action-card .icon { margin-bottom:1.25rem; color: var(--actions-accent); } .action-card h3 { color:#fff; font-weight:700; margin-bottom:0.75rem; font-size:1.125rem; } .action-card p { color: rgba(255,255,255,.6); font-size:0.875rem; line-height:1.6; margin-bottom:1.25rem; } .action-card .cta { display:flex; align-items:center; gap:0.5rem; color: var(--actions-accent); font-weight:600; font-size:0.875rem; font-family: var(--font-display); } /* Palette flashy orange / or / violet-framboise, propre à "Nos actions" — pensée pour tenir face au bleu marine (voir commentaire ci-dessus) — une couleur différente par carte au survol. La carte Quiz garde son traitement turquoise à part (voir plus bas), pour rester la plus visible du lot. */ .actions-grid .action-card:not(.action-card-quiz):nth-child(3n+1):hover { background: var(--actions-terracotta-deep); border-color: var(--actions-terracotta); } .actions-grid .action-card:not(.action-card-quiz):nth-child(3n+2):hover { background: var(--actions-ambre-deep); border-color: var(--actions-ambre); } .actions-grid .action-card:not(.action-card-quiz):nth-child(3n+3):hover { background: var(--actions-corail-deep); border-color: var(--actions-corail); } /* Carte "Quiz" — survol distinct (doré/rouge) pour attirer l'attention au milieu des autres cartes plus sobres. Classe ajoutée automatiquement par PHP (template-parts/home-actions.php) via la détection du modèle de page "Quiz Handisport", quel que soit le permalien choisi pour cette page. */ .action-card.action-card-quiz { border-color: color-mix(in oklch, var(--quiz-accent) 45%, transparent); } .action-card.action-card-quiz:hover { background: var(--quiz-accent-deep); border-color: var(--quiz-accent); transform: translateY(-6px); box-shadow: 0 14px 28px rgba(28,167,176,0.32); } .action-card.action-card-quiz:hover .icon, .action-card.action-card-quiz:hover h3, .action-card.action-card-quiz:hover .cta { color:#fff; } .action-card.action-card-quiz:hover p { color: rgba(255,255,255,.9); } /* ========================================================================== 9. CLUBS ========================================================================== */ .clubs-section { padding:4rem 0; background: var(--concrete-light); position:relative; overflow:hidden; } .clubs-section .watermark { position:absolute; left:0; bottom:0; transform: translateY(20%); color: color-mix(in oklch, var(--navy) 4%, transparent); font-weight:700; font-size:14rem; line-height:1; pointer-events:none; user-select:none; } .clubs-header { display:flex; flex-direction:column; justify-content:space-between; margin-bottom:3rem; gap:1.5rem; position:relative; z-index:1; } @media (min-width:1024px){ .clubs-header{ flex-direction:row; align-items:flex-end; } } .clubs-header h2 { color: var(--navy); font-weight:700; font-size:2.5rem; } .clubs-header p { color: var(--gray-500); margin-top:0.75rem; max-width:36rem; } .clubs-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; position:relative; z-index:1; } @media (min-width:640px){ .clubs-grid{ grid-template-columns: repeat(2,1fr);} } @media (min-width:1024px){ .clubs-grid{ grid-template-columns: repeat(3,1fr);} } .club-tag { display:inline-flex; align-items:center; font-size:0.75rem; font-weight:600; padding:0.3rem 0.7rem; border-radius:999px; } .club-tag-pratique { background:#e8f0fe; color:var(--navy); } .club-tag-handicap { background:#fdecea; color:var(--red-dark,#8a1c1c); } .club-horaires-block { background: var(--concrete-light); border-left:3px solid var(--navy); padding:1.25rem 1.5rem; margin-bottom:1.5rem; } .club-horaires-block h3 { display:flex; align-items:center; gap:0.5rem; color:var(--navy); font-size:1rem; } .club-horaires-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.5rem; } .club-horaires-list li { padding-left:1.1rem; position:relative; color:var(--gray-600,#374151); } .club-horaires-list li::before { content:"—"; position:absolute; left:0; color:var(--red); } .club-badge-labellise { display:inline-flex; align-items:center; gap:0.3rem; background:var(--gold,#c8a24a); color:#1a1a1a; font-size:0.7rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding:0.25rem 0.6rem; border-radius:999px; margin-bottom:0.6rem; } /* Boutons de téléchargement générés automatiquement depuis le contenu (voir h13_style_download_links) : tout lien vers un PDF/Word/Excel/ZIP/CSV dans une page, une actualité ou une fiche devient un bouton visible. */ .btn-telecharger { display: inline-flex; align-items:center; gap:0.6rem; background: var(--navy); color:#fff !important; padding: 0.7rem 1.25rem; border-radius: 6px; font-weight: 600; font-size: 0.95rem; text-decoration:none !important; margin: 0.35rem 0; transition: all .2s; box-shadow: 0 2px 6px rgba(0,0,0,.08); } .btn-telecharger:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); } .btn-telecharger svg { flex-shrink:0; } li .btn-telecharger, p .btn-telecharger { display:inline-flex; } li:has(> .btn-telecharger) { list-style:none; margin-left:-1.5rem; } .club-card-logo { margin-bottom:0.75rem; } .club-card-logo img { max-height:48px; width:auto; display:block; } .club-single-logo { margin-bottom:1.25rem; } .club-single-logo img { max-height:96px; width:auto; display:block; } .club-card { background:#fff; border:1px solid var(--border-c); padding:1.5rem; transition: all .3s; position:relative; overflow:hidden; } .club-card:hover { border-color: var(--navy); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .club-card h3 { color: var(--navy); font-weight:700; font-size:1.125rem; transition: color .2s; } .club-card:hover h3 { color: var(--red-dark); } .club-card .sport { color: var(--red-dark); font-size:0.875rem; font-weight:500; margin-top:0.25rem; } .club-card .meta { display:flex; align-items:center; gap:1rem; font-size:0.875rem; color: var(--gray-400); margin-top:1rem; flex-wrap:wrap; } .club-card .meta span { display:flex; align-items:center; gap:0.25rem; } .club-card .underline { margin-top:1rem; height:2px; width:0; background: var(--red); transition: width .5s; } .club-card:hover .underline { width:100%; } /* Club filters (archive page) */ .club-filters { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; margin-bottom:2rem; } .club-filters select { border:1px solid var(--border-c); padding:0.6rem 1rem; font-size:0.875rem; background:#fff; flex:1 1 220px; min-width:180px; max-width:320px; } .club-filters button { border:1px solid var(--border-c); padding:0.6rem 1.25rem; font-size:0.875rem; background:#fff; flex:0 0 auto; white-space:nowrap; } .club-filters #club-view-toggle { background: var(--navy); color:#fff; border-color: var(--navy); font-weight:700; letter-spacing:0.05em; } .club-filters #club-view-toggle:hover { background: var(--navy-light); } /* ========================================================================== 11. PARTENAIRES ========================================================================== */ .testimonials-section { padding:4rem 0; background: var(--gray-50, #f8f9fa); } .testimonials-section .section-head h2 { color: var(--navy); font-size:1.8rem; letter-spacing:0.1em; text-align:center; } .testimonials-section .section-head .underline-bar { height:3px; width:4rem; background: var(--red); margin:0.75rem auto 2.5rem; } .testimonials-wrap { position:relative; display:flex; align-items:center; gap:0.75rem; } .testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; width:100%; } .testimonials-grid.is-carousel { display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.5rem; scrollbar-width:thin; } .testimonials-grid.is-carousel .testimonial-card { flex:0 0 320px; scroll-snap-align:start; } .testimonials-nav { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-c, #d1d5db); background:#fff; color: var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s; } .testimonials-nav:hover { background: var(--navy); color:#fff; border-color: var(--navy); } .testimonial-card { background:#fff; border-radius:10px; padding:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,.06); border-top:3px solid var(--gold, #e9b200); display:flex; flex-direction:column; cursor:pointer; transition: background-color .25s, transform .2s, box-shadow .25s; } .testimonial-card:hover, .testimonial-card:focus-visible { background: var(--navy); box-shadow:0 10px 24px rgba(1,57,116,.25); transform: translateY(-4px); outline:none; } .testimonial-card:hover blockquote, .testimonial-card:focus-visible blockquote { color:#fff; } .testimonial-card:hover .testimonial-who strong, .testimonial-card:focus-visible .testimonial-who strong { color:#fff; } .testimonial-card:hover .testimonial-role, .testimonial-card:focus-visible .testimonial-role { color: rgba(255,255,255,.75); } .testimonial-card:hover .testimonial-avatar-fallback, .testimonial-card:focus-visible .testimonial-avatar-fallback { background:#fff; color: var(--navy); } .testimonial-card blockquote { margin:0 0 1.5rem; font-size:1.05rem; line-height:1.6; color: var(--navy); font-style:italic; flex-grow:1; transition: color .25s; } .testimonial-card figcaption { display:flex; align-items:center; gap:0.85rem; } .testimonial-photo { width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; } .testimonial-avatar-fallback { width:52px; height:52px; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:1.25rem; flex-shrink:0; transition: all .25s; } .testimonial-who { display:flex; flex-direction:column; line-height:1.3; } .testimonial-who strong { color: var(--navy); font-size:0.9375rem; transition: color .25s; } .testimonial-role { color: var(--gray-500, #6b7280); font-size:0.8125rem; transition: color .25s; } .partners-section { padding:4rem 0; background: var(--navy); } .partners-section .section-head h2 { color:#fff; font-size:1.8rem; letter-spacing:0.1em; } .partners-section .section-head .underline-bar { height:2px; width:4rem; background: var(--red); margin:0.75rem auto 0; } .partners-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem 3rem; margin-top:2.5rem; } .partner-logo { background:#fff; border-radius:8px; padding:1.25rem 1.75rem; display:flex; align-items:center; justify-content:center; min-width:180px; height:110px; transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .partner-logo:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,.25); } .partner-logo img { max-height:4.5rem; max-width:180px; width:auto; height:auto; object-fit:contain; } @media (max-width: 640px) { .partners-grid { gap:1.25rem 1.5rem; } .partner-logo { min-width:140px; height:90px; padding:1rem 1.25rem; } .partner-logo img { max-height:3.5rem; max-width:140px; } } /* Carrousel de partenaires (mode alternatif à la grille fixe, activable dans Réglages du site > Partenaires). Défilement en boucle en CSS pur : le contenu de .partners-track est dupliqué une fois côté PHP, et l'animation glisse d'exactement 50% de sa largeur pour boucler sans coupure visible. */ .partners-carousel { margin-top:2.5rem; overflow:hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .partners-track { display:flex; align-items:center; width:max-content; gap:3rem; animation: h13PartnersScroll var(--partners-duration, 40s) linear infinite; } .partners-track--reverse { animation-direction: reverse; } .partners-carousel--pause-hover .partners-track:hover { animation-play-state: paused; } @keyframes h13PartnersScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 640px) { .partners-track { gap:1.5rem; } } @media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } } /* ========================================================================== 12. CONTACT ========================================================================== */ .contact-section { padding:4rem 0; background: var(--concrete-light); } .contact-grid { display:grid; grid-template-columns:1fr; gap:4rem; } @media (min-width:1024px){ .contact-grid{ grid-template-columns: 1fr 1fr; } } .contact-section h2 { color: var(--navy); font-weight:700; margin-bottom:1.5rem; font-size:2.5rem; } .contact-section > .container > .contact-grid > div > p.lead { color: var(--gray-500); margin-bottom:2rem; line-height:1.7; } .contact-item { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; } .contact-item .ic { width:2.5rem; height:2.5rem; background: var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; } .contact-item .lbl { font-weight:600; color: var(--navy); } .contact-item .val { color: var(--gray-500); font-size:0.875rem; } .social-title { color: var(--navy); font-weight:700; font-size:0.875rem; letter-spacing:0.1em; margin:2rem 0 1rem; } .social-links { display:flex; gap:0.75rem; } .social-links a { width:2.5rem; height:2.5rem; background: var(--navy); display:flex; align-items:center; justify-content:center; color:#fff; transition: background .2s; } .social-links a:hover { background: var(--red); } .contact-form-wrap { background:#fff; padding:2rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); border:1px solid var(--border-c); } .contact-form-wrap h3 { color: var(--navy); font-weight:700; font-size:1.25rem; margin-bottom:1.5rem; } .form-row { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; } .form-group { margin-bottom:1rem; } .form-group label { display:block; font-size:0.875rem; font-weight:600; color: var(--navy); margin-bottom:0.25rem; font-family: var(--font-display); } .form-group input, .form-group select, .form-group textarea { width:100%; border:1px solid var(--border-c); padding:0.65rem 0.75rem; font-size:0.875rem; transition: border-color .2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color: var(--navy); } .form-submit { width:100%; background: var(--navy); color:#fff; padding:0.85rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; font-size:0.875rem; font-family: var(--font-display); border:0; transition: background .2s; } .form-submit:hover { background: var(--navy-light); } .form-feedback { margin-top:1rem; padding:0.75rem 1rem; font-size:0.875rem; } .form-feedback.ok { background: #e6f4ea; color:#1e6b34; } .form-feedback.err { background: #fdeaea; color:#9c1c1c; } /* ========================================================================== 13. FOOTER ========================================================================== */ .site-footer { background: var(--footer-bg, var(--navy-dark)); color:#fff; } .footer-main { padding:3.5rem 0; } .footer-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; } @media (min-width:768px){ .footer-grid{ grid-template-columns: repeat(2,1fr);} } @media (min-width:1024px){ .footer-grid{ grid-template-columns: repeat(3,1fr);} } @media (min-width:1280px){ .footer-grid{ grid-template-columns: repeat(5,1fr);} } .footer-grid h4 { font-weight:700; font-size:0.875rem; letter-spacing:0.1em; margin-bottom:1rem; color: rgba(255,255,255,.8); } .footer-grid p { color: rgba(255,255,255,.5); font-size:0.875rem; line-height:1.6; } .footer-grid ul li { margin-bottom:0.5rem; } .footer-grid ul li a, .footer-grid ul li button { background:none; border:0; padding:0; color: rgba(255,255,255,.5); font-size:0.875rem; transition: color .2s; font-family: var(--font-body); } .footer-grid ul li a:hover, .footer-grid ul li button:hover { color:#fff; } .newsletter-band { background: var(--red); transition: background .3s ease; } .newsletter-band.is-success { background: #1e6b34; } .newsletter-band--card { max-width: 900px; margin: 0 auto; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.1); } .newsletter-band--card .newsletter-inner { padding: 1.75rem 2rem; } .newsletter-band--card .newsletter-text h3 { font-size: 1.05rem; } .newsletter-band--card .newsletter-text p { font-size: 0.85rem; } @media (max-width: 640px) { .newsletter-band--card .newsletter-inner { padding: 1.5rem; } } .newsletter-inner { padding:0.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; } .newsletter-text h3 { color:#fff; font-weight:700; font-size:0.9rem; letter-spacing:0.02em; margin:0 0 0.1rem; } .newsletter-text p { color: rgba(255,255,255,.85); font-size:0.78rem; margin:0; } .newsletter-form { display:flex; flex-direction:column; align-items:flex-start; gap:0.55rem; flex:0 0 auto; } .newsletter-form-row { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; } .newsletter-form-row input[type="email"] { min-width:220px; padding:0.4rem 0.75rem; border:1px solid rgba(255,255,255,.4); border-radius:2px; font-family: var(--font-body); font-size:0.82rem; background:#fff; color: var(--text-main); } .newsletter-form-row input[type="email"]:focus { outline:none; border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.5); } .newsletter-form-row button { display:flex; align-items:center; gap:0.4rem; background: var(--navy-dark); color:#fff; border:0; padding:0.42rem 1rem; font-family: var(--font-display); font-weight:600; font-size:0.72rem; letter-spacing:0.05em; border-radius:2px; cursor:pointer; transition: background .2s; white-space:nowrap; } .newsletter-form-row button:hover { background: var(--navy); } .newsletter-form-row button:disabled { opacity:0.6; cursor:default; } .newsletter-consent { display:flex; align-items:flex-start; gap:0.5rem; cursor:pointer; color: rgba(255,255,255,.85); font-size:0.72rem; line-height:1.4; max-width:520px; } .newsletter-consent input[type="checkbox"] { margin-top:0.2rem; flex:0 0 auto; width:15px; height:15px; accent-color:#fff; cursor:pointer; } .newsletter-consent a { color:#fff; text-decoration:underline; } .newsletter-consent a:hover { color: var(--gold); } .js-newsletter-feedback:not(:empty) { padding:0 1rem 0.65rem; font-size:0.75rem; line-height:1.4; color:#fff; } .js-newsletter-feedback.err { color:#ffd9d6; } @media (max-width:640px) { .newsletter-inner { flex-direction:column; align-items:flex-start; } .newsletter-form { width:100%; } .newsletter-form-row { width:100%; } .newsletter-form-row input[type="email"] { flex:1 1 auto; min-width:0; } } .footer-bar { background:#0a1420; border-top:1px solid rgba(255,255,255,.1); } .footer-bar .container { padding:1rem; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:0.5rem; } @media (min-width:640px){ .footer-bar .container{ flex-direction:row; } } .footer-bar p { color: rgba(255,255,255,.3); font-size:0.75rem; } .footer-bar p a { color: rgba(255,255,255,.75); text-decoration:none; transition: color .2s; } .footer-bar p a:hover, .footer-bar p a:focus-visible { color:#fff; text-decoration:underline; } /* ========================================================================== 14. ACCESSIBILITY PANEL ========================================================================== */ .a11y-toggle { position:fixed; bottom:1.5rem; right:1.5rem; z-index:998; width:3.5rem; height:3.5rem; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; border:0; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: all .2s; } .a11y-toggle:hover { background: var(--navy-light); transform: scale(1.1); } .a11y-backdrop { position:fixed; inset:0; background: rgba(0,0,0,.3); z-index:997; display:none; } .a11y-panel { position:fixed; bottom:6rem; right:1.5rem; z-index:998; width:20rem; max-width:calc(100vw - 2rem); background:#fff; box-shadow: 0 20px 50px rgba(0,0,0,.25); border-radius:0.5rem; border:1px solid var(--border-c); display:none; max-height:70vh; overflow-y:auto; } .a11y-panel.is-open, .a11y-backdrop.is-open { display:block; } .a11y-panel-head { display:flex; align-items:center; justify-content:space-between; padding:1.25rem; border-bottom:1px solid var(--border-c); position:sticky; top:0; background:#fff; } .a11y-panel-head h2 { color: var(--navy); font-weight:700; font-size:1.1rem; } .a11y-panel-head button { background:none; border:0; color: var(--gray-400); } .a11y-body { padding:1.25rem; } .a11y-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; } .a11y-row .lbl { font-size:0.875rem; font-weight:600; color: var(--navy); } .a11y-textctl { display:flex; align-items:center; gap:0.5rem; } .a11y-textctl button { width:2rem; height:2rem; border:1px solid var(--border-c); background:#fff; display:flex; align-items:center; justify-content:center; } .a11y-textctl span { font-size:0.875rem; min-width:2.5rem; text-align:center; } .switch { position:relative; display:inline-block; width:2.75rem; height:1.5rem; } .switch input { opacity:0; width:0; height:0; } .slider-toggle { position:absolute; cursor:pointer; inset:0; background: var(--border-c); border-radius:1rem; transition:.2s; } .slider-toggle:before { content:''; position:absolute; height:1.1rem; width:1.1rem; left:0.2rem; bottom:0.2rem; background:#fff; border-radius:50%; transition:.2s; } input:checked + .slider-toggle { background: var(--navy); } input:checked + .slider-toggle:before { transform: translateX(1.25rem); } .a11y-reset { width:100%; padding:0.6rem; border:1px solid var(--border-c); background:#fff; color: var(--navy); font-size:0.875rem; font-weight:600; } .a11y-reset:hover { background: var(--concrete); } /* --------------------------------------------------------------------- Mode "Contraste élevé" (panneau accessibilité) Le principe : tout fond clair devient noir, tout texte sombre devient blanc, et chaque bloc garde une bordure visible pour rester lisible sans la subtilité des ombres/nuances habituelles. Volontairement exhaustif : sur un site handisport l'accessibilité n'est pas un détail. --------------------------------------------------------------------- */ html.high-contrast body { background:#000 !important; color:#fff !important; } html.high-contrast a { text-decoration: underline; } /* Sections et blocs à fond clair : basculent en noir avec bordure blanche */ html.high-contrast .site-header, html.high-contrast .site-header.is-scrolled, html.high-contrast .stats-section, html.high-contrast .actions-overlay, html.high-contrast .partners-section, html.high-contrast .site-footer, html.high-contrast .presentation, html.high-contrast .sports-section, html.high-contrast .generic-section, html.high-contrast .mobile-nav, html.high-contrast .a11y-panel { background:#000 !important; color:#fff !important; } /* Cartes (clubs, sports, actualités) et formulaire de contact */ html.high-contrast .sport-card, html.high-contrast .club-card, html.high-contrast .actu-card, html.high-contrast .contact-form-wrap, html.high-contrast .club-filters select, html.high-contrast .club-filters button, html.high-contrast .a11y-reset { background:#000 !important; color:#fff !important; border:1px solid #fff !important; } html.high-contrast .sport-card.has-photo::before { background: rgba(0,0,0,.6) !important; } /* Texte qui était en navy/gris sur fond clair devient blanc */ html.high-contrast .sport-card .name, html.high-contrast .club-card h3, html.high-contrast .club-card .meta, html.high-contrast .club-card .meta span, html.high-contrast .actu-card h3, html.high-contrast .actu-card .excerpt, html.high-contrast .contact-form-wrap h3, html.high-contrast .form-group label, html.high-contrast .lbl, html.high-contrast .val, html.high-contrast h1, html.high-contrast h2, html.high-contrast h3, html.high-contrast h4, html.high-contrast p { color:#fff !important; } /* Les accents rouge/or restent tels quels : déjà suffisamment contrastés sur noir */ html.high-contrast .club-card .sport, html.high-contrast .actu-card .readmore { color: var(--gold) !important; } /* Champs de formulaire : fond noir, texte blanc, bordure visible au focus */ html.high-contrast .form-group input, html.high-contrast .form-group select, html.high-contrast .form-group textarea { background:#000 !important; color:#fff !important; border:1px solid #fff !important; } html.high-contrast .form-group input:focus, html.high-contrast .form-group select:focus, html.high-contrast .form-group textarea:focus { outline: 2px solid var(--gold) !important; border-color: var(--gold) !important; } /* Le panneau accessibilité lui-même doit rester lisible en mode contrasté */ html.high-contrast .a11y-panel-head { background:#000 !important; border-bottom-color:#fff !important; } html.high-contrast .a11y-panel-head h2, html.high-contrast .a11y-panel-head button, html.high-contrast .a11y-row .lbl, html.high-contrast #a11y-text-value { color:#fff !important; } /* Images : une bordure fine pour qu'elles se détachent du fond noir */ html.high-contrast img { border:1px solid rgba(255,255,255,.3); } /* Zone de focus clavier renforcée sur tout élément interactif */ html.high-contrast a:focus-visible, html.high-contrast button:focus-visible, html.high-contrast input:focus-visible, html.high-contrast select:focus-visible, html.high-contrast textarea:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px; } /* ========================================================================== 15. GENERIC PAGE / ARCHIVE STYLES ========================================================================== */ .page-hero { background: var(--navy); padding: 7rem 0 2.25rem; text-align: center; position: relative; overflow: hidden; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color:#fff; font-size:2.5rem; font-weight:700; } .page-hero p { color: rgba(255,255,255,.6); margin-top:0.5rem; } .page-hero .breadcrumbs ol { justify-content: center; } .page-hero.has-bg-image { background-size: cover; background-position: center; } .page-hero.has-bg-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,57,116,.4), rgba(1,57,116,.62)); z-index: 0; } .page-hero.has-bg-image h1, .page-hero.has-bg-image p, .page-hero.has-bg-image .back-link, .page-hero.has-bg-image .breadcrumbs a, .page-hero.has-bg-image .breadcrumbs li, .page-hero.has-bg-image .breadcrumbs [aria-current="page"] { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.3); } @media (max-width: 782px) { .page-hero { padding: 5.5rem 0 1.75rem; } .page-hero h1 { font-size: 1.85rem; } } .generic-section { padding:4rem 0; } /* ---------- Page "Condition de prêt du matériel" ---------- */ .pret-infos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin:2rem 0 2.5rem; } .pret-info-box { border:1px solid var(--border-c); border-radius:8px; padding:1.25rem 1.5rem; background:#fbfbfc; } .pret-info-box h4 { font-family: var(--font-display); color: var(--navy); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.5rem; } .pret-info-box p { margin:0; line-height:1.6; } .pret-info-box a { color: var(--red-dark); font-weight:600; } .pret-ou { display:inline-block; font-size:0.75rem; text-transform:uppercase; color: var(--gray-500); margin:0.25rem 0; } .pret-info-box-affilie { border-color: var(--gold); background: color-mix(in oklch, var(--gold) 8%, #fff); margin-bottom:2rem; } .pret-info-box-affilie h4 { color: var(--red-dark); } .js-pret-gratuite-wrap { display:none; margin-top:-0.5rem; } .pret-tarifs-note { color: var(--gray-500); font-size:0.9rem; margin-bottom:1.25rem; } .pret-table-wrap { overflow-x:auto; margin-bottom:2.5rem; border:1px solid var(--border-c); border-radius:8px; } .pret-table { width:100%; border-collapse:collapse; font-size:0.9rem; } .pret-table thead th { background: var(--navy); color:#fff; font-family: var(--font-display); font-weight:600; text-align:left; padding:0.75rem 1rem; white-space:nowrap; } .pret-table tbody td { padding:0.65rem 1rem; border-top:1px solid var(--border-c); vertical-align:middle; } .pret-table tbody tr:nth-child(even) { background:#fafbfc; } .pret-qty-input { width:4.5rem; padding:0.4rem 0.5rem; border:1px solid var(--border-c); border-radius:4px; font-size:0.9rem; text-align:center; } .pret-qty-input:focus { outline:none; border-color: var(--navy); } .pret-radio-row { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:0.25rem; } .pret-radio { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; font-weight:normal !important; color: var(--gray-500); cursor:pointer; } .pret-radio input { accent-color: var(--red); } .pret-form h3 { font-family: var(--font-display); color: var(--navy); font-size:1.15rem; margin:2rem 0 0.75rem; } .pret-unite-note { display:block; font-size:0.78rem; color: var(--gray-500); font-weight:normal; margin-top:0.15rem; } .pret-recap { background: var(--navy); color:#fff; border-radius:8px; padding:1.25rem 1.5rem; margin:0 0 2rem; } .pret-recap-line { display:flex; justify-content:space-between; align-items:baseline; padding:0.25rem 0; font-family: var(--font-display); } .pret-recap-line strong { font-size:1.35rem; color:#fff; } .pret-recap-note { margin:0.75rem 0 0; font-size:0.78rem; color: rgba(255,255,255,.65); font-family: var(--font-body); font-weight:normal; } .form-consent { display:flex; align-items:flex-start; gap:0.6rem; cursor:pointer; color: var(--text-main); font-size:0.82rem; line-height:1.45; margin:1.25rem 0 1.5rem; max-width:640px; } .form-consent input[type="checkbox"] { margin-top:0.2rem; flex:0 0 auto; width:16px; height:16px; accent-color: var(--navy); cursor:pointer; } .form-consent a { color: var(--navy-light); text-decoration:underline; } .form-consent a:hover { color: var(--red); } [data-theme="dark"] .form-consent a { color: var(--gold); } @media (max-width: 640px) { .pret-table thead { display:none; } .pret-table, .pret-table tbody, .pret-table tr, .pret-table td { display:block; width:100%; } .pret-table tr { border-top:1px solid var(--border-c); padding:0.75rem 1rem; } .pret-table td { border:0; padding:0.2rem 0; display:flex; justify-content:space-between; gap:1rem; } .pret-table td::before { content: attr(data-label); font-weight:600; color: var(--navy); } } .documents-intro { max-width:48rem; font-size:1.1rem; line-height:1.7; color: oklch(0.28 0.03 260); margin:0 0 2.5rem; } /* Quiz Handisport */ .quiz-intro { max-width:48rem; font-size:1.1rem; line-height:1.7; color: oklch(0.28 0.03 260); margin:0 0 2.5rem; } .quiz-app { max-width:38rem; margin:0 auto; background:#fff; border:1px solid var(--border-c); border-radius:1rem; padding:2rem; box-shadow:0 10px 30px rgba(1,57,116,0.08); } .quiz-screen.quiz-start { text-align:center; padding:1.5rem 0; } .quiz-meta { color: oklch(0.45 0.02 260); margin-bottom:1.25rem; } .quiz-progress { height:6px; border-radius:3px; background: oklch(0.92 0.01 260); margin-bottom:1.25rem; overflow:hidden; } .quiz-progress-bar { height:100%; width:0; background: var(--red); transition: width .3s ease; } .quiz-theme-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--red-dark); margin-bottom:0.5rem; } .quiz-question-text { font-family: var(--font-display); color: var(--navy); font-size:1.3rem; line-height:1.4; margin:0 0 1.5rem; } .quiz-choices { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.25rem; } .quiz-choice { text-align:left; padding:0.85rem 1.1rem; border-radius:0.65rem; border:1.5px solid var(--border-c); background:#fff; font-size:1rem; cursor:pointer; transition: border-color .15s ease, background .15s ease; } .quiz-choice:hover:not(:disabled) { border-color: var(--navy-light); } .quiz-choice:disabled { cursor:default; } .quiz-choice.is-correct { border-color:#2e8b57; background: color-mix(in oklch, #2e8b57 10%, #fff); } .quiz-choice.is-wrong { border-color: var(--red); background: color-mix(in oklch, var(--red) 8%, #fff); } .quiz-explanation { background: oklch(0.97 0.01 260); border-left:3px solid var(--gold); border-radius:0.4rem; padding:0.9rem 1.1rem; font-size:0.95rem; line-height:1.6; margin-bottom:1.25rem; } .quiz-score-line { font-size:1.15rem; color: var(--navy); margin-bottom:1.5rem; } .quiz-score-form label { display:block; font-weight:600; margin-bottom:0.5rem; } .quiz-score-form-row { display:flex; gap:0.75rem; flex-wrap:wrap; } .quiz-score-form-row input[type="text"] { flex:1; min-width:12rem; padding:0.7rem 1rem; border-radius:0.5rem; border:1.5px solid var(--border-c); font-size:1rem; } .quiz-score-feedback { margin-top:0.75rem; font-size:0.9rem; color: var(--navy); } .quiz-restart { margin-top:1.5rem; } .quiz-leaderboard { max-width:38rem; margin:2.5rem auto 0; } .quiz-leaderboard h3 { font-family: var(--font-display); color: var(--navy); margin-bottom:1rem; } .quiz-leaderboard-list { list-style:none; margin:0; padding:0; } .quiz-leaderboard-list li { display:flex; align-items:center; gap:0.75rem; padding:0.65rem 1rem; border-bottom:1px solid var(--border-c); font-size:0.95rem; } .quiz-leaderboard-list .rank { font-weight:700; color: var(--red-dark); min-width:1.75rem; } .quiz-leaderboard-list .pseudo { flex:1; } .quiz-leaderboard-list .score { color: var(--navy); font-weight:600; } .quiz-leaderboard-empty { color: oklch(0.45 0.02 260); font-style:italic; } .single-content { max-width:48rem; margin:0 auto; line-height:1.8; color: oklch(0.28 0.03 260); } .single-content > *:first-child { margin-top:0; } .single-content h2, .single-content h3, .single-content h4 { font-family: var(--font-display); color: var(--navy); font-weight:700; margin-top:2.25rem; margin-bottom:0.85rem; line-height:1.25; } .single-content h2 { font-size:1.5rem; padding-bottom:0.6rem; border-bottom:2px solid var(--border-c); } .single-content h3 { font-size:1.2rem; } .single-content h4 { color: var(--red-dark); text-transform:uppercase; letter-spacing:0.03em; font-size:0.95rem; } .single-content p { margin-bottom:1.1rem; } .single-content strong { color: var(--navy); font-weight:700; } .single-content ul, .single-content ol { margin:0 0 1.25rem 0.25rem; padding-left:1.25rem; } .single-content ul { list-style: none; } .single-content ul > li { position:relative; padding-left:1.15rem; margin-bottom:0.6rem; } .single-content ul > li::before { content:''; position:absolute; left:0; top:0.65em; width:6px; height:6px; border-radius:50%; background: var(--red); } .single-content ol { list-style: decimal; } .single-content ol > li { padding-left:0.35rem; margin-bottom:0.6rem; } .single-content ol > li::marker { color: var(--red-dark); font-weight:700; } .single-content a { color: var(--red-dark); font-weight:600; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--red-dark) 40%, transparent); text-underline-offset: 0.15em; transition: color .2s, text-decoration-color .2s; } .single-content a:hover { color: var(--red-dark); text-decoration-color: var(--red-dark); } .single-content img { margin:1.5rem 0; border-radius: var(--radius-lg, 8px); } .single-content em { color: var(--gray-500); } /* -------------------------------------------------------------------- Barre de partage (fin d'actualité) -------------------------------------------------------------------- */ .single-share-wrap { max-width:48rem; margin:2.5rem auto 0; padding-top:1.75rem; border-top:2px solid var(--border-c); } .share-bar { display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem; } .share-label { display:flex; align-items:center; gap:0.4rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem; color:var(--gray-500); font-weight:600; flex-shrink:0; } .share-label svg { flex-shrink:0; } .share-buttons { display:flex; flex-wrap:wrap; gap:0.55rem; } .share-btn { display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:50%; border:2px solid var(--border-c); background:var(--surface); color:var(--text-main); cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s; text-decoration:none; position:relative; padding:0; } .share-btn svg { flex-shrink:0; } .share-btn:hover { transform:translateY(-2px); } .share-fb:hover { background:#1877f2; border-color:#1877f2; color:#fff; } .share-x:hover { background:#000; border-color:#000; color:#fff; } .share-li:hover { background:#0a66c2; border-color:#0a66c2; color:#fff; } .share-wa:hover { background:#25d366; border-color:#25d366; color:#fff; } .share-mail:hover { background:var(--navy); border-color:var(--navy); color:#fff; } .share-instagram:hover, .share-instagram.copied { background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); border-color:transparent; color:#fff; } .share-copy:hover, .share-copy.copied { background:var(--red-dark); border-color:var(--red-dark); color:#fff; } .share-copy, .share-instagram { font-family:inherit; } /* Infobulle de confirmation (Copier le lien / Instagram) : au-dessus du bouton, pour donner un retour visuel sans texte permanent à côté de chaque icône. */ .share-toast { position:absolute; bottom:calc(100% + 0.6rem); left:50%; transform:translateX(-50%) translateY(4px); background:var(--navy-dark); color:#fff; font-size:0.72rem; font-weight:600; line-height:1.3; white-space:nowrap; padding:0.4rem 0.7rem; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:2; } .share-toast::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--navy-dark); } .share-btn.show-toast .share-toast { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:420px){ .share-toast{ white-space:normal; max-width:11rem; text-align:center; } } /* -------------------------------------------------------------------- Actualités similaires (fin d'actualité) -------------------------------------------------------------------- */ .related-actus-section { padding-top:1rem; } .related-actus-grid { grid-template-columns: 1fr; } @media (min-width:768px){ .related-actus-grid{ grid-template-columns: repeat(3,1fr); } } @media (min-width:1024px){ .related-actus-grid{ grid-template-columns: repeat(3,1fr); } } /* Vidéos intégrées (YouTube/Vimeo...) : responsive dans tous les cas, que ce soit via l'auto-embed WordPress (enveloppé en .video-embed, voir functions.php) ou un code