/* ================================================================== CRESSMA — site vitrine · v1.5.0 FICHIER : /assets/css/site.css RÔLE : Feuille de style unique de tout le site ================================================================== */ /* ============================================================ CRESSMA — site vitrine · site.css (fichier unique) Ordre : polices → reset → variables → base → composants → sections → utilitaires animation → replis → media queries ============================================================ */ /* ---------- 1. Polices auto-hébergées (variables, sous-jeu latin) ---------- */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('../fonts/public-sans-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* ---------- 2. Reset ---------- */ * { box-sizing: border-box; } html { background: var(--blanc); } body { margin: 0; color: var(--profond); font-family: var(--font-texte); overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, p { overflow-wrap: break-word; } /* ---------- 3. Variables ---------- */ :root { /* Palette officielle (brief) */ --blanc: #FFFFFF; --ecume: #E6F4F6; /* fond clair */ --lagon: #2AA5B8; /* décor uniquement, jamais porteur de texte courant */ --moyen: #147A8C; /* liens ; sur écume : titres >= 24px seulement */ --profond: #0B4F63; /* encre principale */ --corail: #F4A259; /* CTA principal + Espace membres uniquement */ --brou: #5C3505; /* texte sur corail */ /* Teintes dérivées entérinées (hovers, fonds, encres secondaires) */ --encre-2: #1B4C5B; /* texte secondaire sur blanc */ --encre-3: #164E5F; /* texte secondaire sur écume */ --encre-hero: #12495A; --lien-fonce: #10697A; --corail-hover: #F0913A; --filet: #C9E4E9; /* bordures */ --filet-2: #D8ECEF; --ecume-2: #DDF0F3; /* texte clair sur profond */ --abysse: #073E4E; /* fond du footer */ --font-titre: 'Archivo', sans-serif; --font-texte: 'Public Sans', system-ui, sans-serif; --largeur: 1240px; --rayon: 8px; --rayon-carte: 14px; } /* ---------- 4. Base ---------- */ a { color: var(--moyen); } a:hover { color: var(--profond); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--lagon); outline-offset: 3px; border-radius: 4px; } .conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* Badge de profondeur / d'entête */ .badge { margin: 0 0 16px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--ecume); color: var(--profond); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; } /* Boutons */ .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem; } .btn-corail { background: var(--corail); color: var(--brou); } .btn-corail:hover { background: var(--corail-hover); color: var(--brou); } .btn-contour { border: 1.5px solid var(--profond); color: var(--profond); font-variation-settings: 'wght' 620; } .btn-contour:hover { background: var(--blanc); color: var(--profond); } .btn-blanc { background: var(--blanc); color: var(--profond); font-variation-settings: 'wght' 700; font-size: 1rem; padding: 0 20px; } .btn-blanc:hover { background: var(--ecume); color: var(--profond); } /* ---------- 5. Entête ---------- */ .entete { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); animation: descenteNav 340ms cubic-bezier(.2, .7, .2, 1) 120ms both; } /* Repli : sans backdrop-filter (anciens navigateurs), fond opaque */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .entete { background: rgba(255, 255, 255, 0.97); } } .entete-int { max-width: var(--largeur); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 24px; justify-content: space-between; } .logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; min-height: 48px; padding-top: 12px; } .logo-nom { font-family: var(--font-titre); font-variation-settings: 'wdth' 118, 'wght' 820; font-size: 26px; letter-spacing: -0.02em; color: var(--profond); } .logo-lieu { font-size: 14px; color: var(--moyen); } .nav-liens { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; } .lien-nav { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--profond); font-size: 16px; } .lien-nav:hover { background: var(--ecume); color: var(--profond); } .lien-nav.actif { background: var(--ecume); } .entete-actions { display: flex; align-items: center; gap: 8px; } .entete .btn-corail { min-height: 48px; padding: 0 20px; font-size: 16px; font-variation-settings: 'wght' 700; white-space: nowrap; } /* Menu mobile (details/summary, utilisable au clavier) */ .menu-mobile { display: none; position: relative; } .menu-mobile > summary { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--filet); cursor: pointer; list-style: none; color: var(--profond); } .menu-mobile > summary::-webkit-details-marker { display: none; } .menu-mobile > summary:hover { background: var(--ecume); } .burger { display: flex; flex-direction: column; gap: 5px; } .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--profond); } .croix { display: none; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 22px; line-height: 1; } .menu-mobile[open] .croix { display: block; } .menu-mobile[open] .burger { display: none; } .menu-mobile > nav { position: absolute; right: -24px; left: auto; top: calc(100% + 10px); width: calc(100vw); max-width: 100vw; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 32px rgba(11, 79, 99, 0.14); padding: 8px 24px 20px; display: flex; flex-direction: column; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menu-mobile > nav { background: #FFFFFF; } } .menu-mobile > nav a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--ecume); text-decoration: none; color: var(--profond); font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 1.25rem; } .menu-mobile > nav a:last-child { border-bottom: 0; } .menu-mobile > nav a:hover { color: var(--moyen); } /* ---------- 6. Fond « descente » de l'accueil ---------- */ .fond-descente { animation: fondDescente linear both; animation-timeline: scroll(root block); } /* ---------- 7. Hero (accueil) ---------- */ .hero { position: relative; min-height: 94dvh; margin-top: -76px; display: flex; align-items: flex-end; overflow: clip; } .hero-photo { position: absolute; inset: -14dvh 0; animation: balayage 900ms cubic-bezier(.3, .8, .2, 1) 60ms both, paraPhoto linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 94dvh; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; } .hero-voile { position: absolute; inset: -8dvh 0; animation: paraVoile linear both; animation-timeline: scroll(root block); animation-range: 0 94dvh; } .hero-voile > div { position: absolute; inset: -12%; opacity: 0.5; mix-blend-mode: screen; background: radial-gradient(40% 26% at 34% 14%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(34% 22% at 72% 34%, rgba(230,244,246,0.6), transparent 72%); animation: surface 14s ease-in-out infinite; will-change: transform; } .hero-texte { position: relative; width: 100%; animation: paraTexte linear both; animation-timeline: scroll(root block); animation-range: 0 94dvh; } .hero-texte > .conteneur { padding-bottom: 56px; } .hero-panneau { max-width: 620px; background: rgba(230, 244, 246, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--rayon-carte); padding: clamp(24px, 3vw, 40px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-panneau { background: rgba(230, 244, 246, 0.97); } } .hero h1 { margin: 0; font-family: var(--font-titre); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.94; letter-spacing: -0.025em; color: var(--profond); font-variation-settings: 'wdth' 114, 'wght' 800; text-wrap: balance; } .hero h1 span { display: block; animation: ligneHaut 620ms cubic-bezier(.2, .8, .2, 1) both; } .hero h1 span:nth-child(1) { animation-delay: 120ms; } .hero h1 span:nth-child(2) { animation-delay: 260ms; } .hero h1 span:nth-child(3) { animation-delay: 400ms; } .hero-phrase { margin: 22px 0 0; max-width: 52ch; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); line-height: 1.55; color: var(--encre-hero); text-wrap: pretty; animation: montee 520ms ease-out 560ms both; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; animation: montee 520ms ease-out 680ms both; } /* ---------- 8. Sections communes ---------- */ .section { padding-top: clamp(56px, 8vw, 104px); } .section--large { padding-top: clamp(72px, 10vw, 128px); } .section--geante { padding-top: clamp(104px, 15vw, 208px); } .titre-section { margin: 0 0 12px; transform-origin: left center; font-family: var(--font-titre); font-size: clamp(1.875rem, 4vw, 2.875rem); line-height: 1.04; letter-spacing: -0.018em; text-wrap: balance; font-variation-settings: 'wdth' 108, 'wght' 760; animation: poseTitre linear both; animation-timeline: view(); animation-range: entry 4% entry 60%; } .intro-section { margin: 0 0 32px; max-width: 62ch; font-size: 1.0625rem; line-height: 1.6; color: var(--encre-2); text-wrap: pretty; animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 62%; } /* Médias avec parallaxe interne */ .media { position: relative; overflow: clip; border-radius: var(--rayon); animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 82% cover 100%; } .media-para { position: absolute; inset: -9% 0; animation: paraSection linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .media-para img { width: 100%; height: 100%; object-fit: cover; animation: poseImage linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* ---------- 9. Bento (plongées de la semaine) ---------- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; } .carte-bento { container-type: inline-size; animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 46%; } .carte-blanche { background: var(--blanc); border: 1px solid var(--filet-2); border-radius: var(--rayon); padding: 28px; } .bento-planning { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 18px; } .bento-planning h3 { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 104, 'wght' 720; font-size: 1.25rem; } .bento-planning .repli { margin: 0; flex: 1; font-size: 1.0625rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; } .bento-planning .lien-planning { font-size: 1rem; align-self: flex-start; min-height: 48px; display: inline-flex; align-items: center; } .bento-img-1 { grid-column: 3 / 4; grid-row: 1 / 3; min-height: 380px; } .bento-turquoise { grid-column: 4 / 5; grid-row: 1 / 2; background: var(--lagon); border-radius: var(--rayon); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; animation-range: entry 4% entry 52%; } .bento-turquoise h3 { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 780; font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.02; color: var(--blanc); text-wrap: balance; } .bento-turquoise p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--blanc); text-wrap: pretty; } .bento-img-2 { grid-column: 4 / 5; grid-row: 2 / 3; } .bento-chiffres { grid-column: 1 / 3; grid-row: 3 / 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; animation-range: entry 4% entry 64%; } .chiffre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .chiffre-libelle { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--encre-2); } .bento-carte-sites { grid-column: 3 / 5; grid-row: 3 / 4; border-radius: var(--rayon); overflow: clip; position: relative; background: var(--profond); min-height: 220px; animation-range: entry 4% entry 58%; } .carte-sites-fond { position: absolute; inset: 0; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); } .bento-carte-sites:hover .carte-sites-fond { transform: scale(1.045); } .carte-sites-contenu { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; gap: 20px; } .carte-sites-contenu h3 { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: 1.25rem; color: var(--blanc); text-wrap: balance; } @container (min-width: 420px) { .carte-sites-contenu h3, .bento-planning h3 { font-size: 1.5rem; } .carte-sites-contenu { padding: 32px; } } /* ---------- 10. Portes (par où on commence) ---------- */ .portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .porte { display: flex; flex-direction: column; text-decoration: none; color: var(--profond); border-radius: var(--rayon); transition: transform 300ms cubic-bezier(.2, .7, .2, 1); } .porte:hover { transform: translateY(-4px); color: var(--profond); } .porte .media { aspect-ratio: 4 / 3; } .porte-libelle { display: flex; flex-direction: column; gap: 10px; padding: 22px 4px 0; } .porte-titre { font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: 1.625rem; line-height: 1.05; } .porte-texte { font-size: 1.0625rem; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; } /* ---------- 11. Encart mercredi ---------- */ .encart-mercredi { max-width: 68ch; border-left: 2px solid var(--lagon); padding-left: clamp(20px, 3vw, 36px); } .encart-mercredi h2 { margin: 0 0 14px; transform-origin: left center; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.06; text-wrap: balance; animation: poseTitre linear both; animation-timeline: view(); animation-range: entry 4% entry 60%; } .encart-mercredi p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--encre-3); text-wrap: pretty; animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 58%; } /* ---------- 12. Vidéo (façade sans iframe) ---------- */ .video-facade { border-radius: 10px; overflow: clip; position: relative; background: var(--profond); animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 84% cover 100%; } .video-bouton { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; position: relative; aspect-ratio: 16 / 9; text-decoration: none; } .video-bouton img { width: 100%; height: 100%; object-fit: cover; animation: poseImage linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } .video-degrade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,79,99,0.62), rgba(11,79,99,0.08)); } .video-lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 999px; background: var(--corail); color: var(--brou); font-size: 30px; line-height: 1; padding-left: 6px; } .video-duree { position: absolute; left: 20px; bottom: 16px; color: var(--blanc); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; } .video-cadre { position: relative; aspect-ratio: 16 / 9; } .video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .chapitres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .chapitre { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 48px; padding: 16px 18px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--blanc); color: var(--profond); text-align: left; cursor: pointer; font-family: var(--font-texte); text-decoration: none; } .chapitre:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); } .chapitre-titre { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; } .chapitre-temps { font-size: 0.9375rem; color: var(--moyen); font-variant-numeric: tabular-nums; } /* ---------- 13. Asso (un club, pas un prestataire) ---------- */ .asso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .asso .media { aspect-ratio: 4 / 3; animation-range: cover 84% cover 100%; } .asso h2 { margin: 0 0 20px; transform-origin: left center; font-family: var(--font-titre); font-size: clamp(1.875rem, 4.4vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--profond); text-wrap: balance; font-variation-settings: 'wdth' 108, 'wght' 780; animation: poseTitre linear both; animation-timeline: view(); animation-range: entry 4% entry 60%; } .asso-texte { margin: 0; max-width: 60ch; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); line-height: 1.62; color: var(--encre-3); } .asso-texte span { display: block; text-wrap: pretty; animation: revele 1ms linear both; animation-timeline: view(); } .asso-texte span:nth-child(1) { animation-range: entry 10% entry 42%; } .asso-texte span:nth-child(2) { animation-range: entry 16% entry 50%; } .asso-texte span:nth-child(3) { animation-range: entry 22% entry 58%; } .asso-lien { display: inline-flex; align-items: center; min-height: 48px; margin-top: 20px; font-size: 1.0625rem; } /* ---------- 14. Bandeau membres ---------- */ .bandeau-membres { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; background: var(--profond); border-radius: var(--rayon-carte); padding: clamp(28px, 4vw, 48px); } .bandeau-membres h2, .bandeau-membres .bandeau-titre { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 760; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.04; color: var(--blanc); text-wrap: balance; } .bandeau-membres p { margin: 0; max-width: 56ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ecume-2); text-wrap: pretty; } .bandeau-membres .btn-corail { white-space: nowrap; } .section-bandeau { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(64px, 9vw, 104px); } /* ---------- 15. Respiration avant footer ---------- */ .respiration { position: relative; height: 45dvh; overflow: clip; animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 90% cover 100%; } .respiration .media-para { inset: -9% 0; } .respiration-degrade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(7, 62, 78, 0.94) 100%); } /* ---------- 16. Entête de page (pages intérieures) ---------- */ .bandeau-page { max-width: var(--largeur); margin: 0 auto; padding: clamp(32px, 5vw, 64px) 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 46dvh; } .bandeau-page h1 { margin: 0; max-width: 20ch; font-family: var(--font-titre); font-size: clamp(2.25rem, 5.6vw, 4rem); line-height: 0.96; letter-spacing: -0.024em; color: var(--profond); font-variation-settings: 'wdth' 116, 'wght' 800; text-wrap: balance; animation: ligneHaut 560ms cubic-bezier(.2, .8, .2, 1) 80ms both; } .bandeau-page-phrase { margin: 22px 0 0; max-width: 56ch; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); line-height: 1.6; color: var(--encre-3); text-wrap: pretty; animation: montee 480ms ease-out 320ms both; } .bandeau-page-image { position: relative; min-height: 38dvh; border-radius: 16px; overflow: clip; background: var(--profond); animation: balayage 760ms cubic-bezier(.3, .8, .2, 1) 60ms both; } .bandeau-page-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } /* ---------- 17. Pied de page ---------- */ .pied { background: var(--abysse); color: var(--ecume); } .pied-int { max-width: var(--largeur); margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .pied-logo { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 118, 'wght' 820; font-size: 22px; color: var(--blanc); } .pied-titre { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem; color: var(--blanc); } .pied-texte { margin: 0; font-size: 1rem; line-height: 1.6; } .pied-tel { margin: 0 0 8px; } .pied-tel a { color: var(--ecume); font-size: 1.0625rem; display: inline-flex; min-height: 48px; align-items: center; } .pied-horaires { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; line-height: 1.5; } .pied-horaires p { margin: 0; } .pied-horaires strong { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-weight: normal; color: var(--blanc); } .pied-plan { display: flex; flex-direction: column; } .pied-plan a { color: var(--ecume); font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; } .pied-plan a:hover, .pied-tel a:hover, .pied-credit a:hover { color: var(--blanc); } .pied-credit { border-top: 1px solid rgba(230, 244, 246, 0.18); } .pied-credit p { max-width: var(--largeur); margin: 0 auto; padding: 18px 24px; font-size: 0.9375rem; color: var(--ecume-2); text-align: center; text-wrap: balance; } .pied-credit a { color: var(--ecume); } /* ---------- 18. Curseur bulle (desktop pointeur fin uniquement) ---------- */ .bulle { display: none; } @media (hover: hover) and (pointer: fine) { .bulle { display: block; position: fixed; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 999px; border: 1.5px solid var(--lagon); background: rgba(42, 165, 184, 0.14); pointer-events: none; opacity: 0; z-index: 60; transition: width 220ms ease, height 220ms ease, opacity 200ms ease, margin 220ms ease; } } /* ---------- 19. Keyframes ---------- */ @keyframes fondDescente { 0% { background-color: #FFFFFF; } 40% { background-color: oklch(0.985 0.006 206); } 74% { background-color: oklch(0.955 0.016 206); } 85% { background-color: oklch(0.80 0.050 212); } 93% { background-color: oklch(0.40 0.080 224); } 100% { background-color: oklch(0.30 0.075 228); } } @keyframes ligneHaut { from { clip-path: inset(0 0 105% 0); transform: translateY(0.14em); } to { clip-path: inset(0 0 -10% 0); transform: translateY(0); } } @keyframes balayage { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes descenteNav { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes montee { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes surface { 0% { transform: translate3d(-4%, -2%, 0) scale(1.06); } 50% { transform: translate3d(4%, 2%, 0) scale(1.12); } 100% { transform: translate3d(-4%, -2%, 0) scale(1.06); } } @keyframes paraPhoto { from { transform: translateY(0) scale(1.1); } to { transform: translateY(13dvh) scale(1.1); } } @keyframes paraVoile { from { transform: translateY(0); } to { transform: translateY(6dvh); } } @keyframes paraTexte { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-12dvh); opacity: 0; } } @keyframes paraSection { from { transform: translateY(-8%); } to { transform: translateY(8%); } } @keyframes poseImage { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } @keyframes sortieImage { from { opacity: 1; } to { opacity: 0.1; } } @keyframes poseTitre { from { opacity: 0.75; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes revele { from { clip-path: inset(0 0 100% 0); transform: translateY(10px); } to { clip-path: inset(0 0 -20% 0); transform: translateY(0); } } @keyframes pose { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 20. Repli sans timelines de scroll ---------- Safari < 26, Firefox : fond clair fixe, tout visible, encre sombre partout. */ @supports not (animation-timeline: scroll()) { .fond-descente { animation: none; background-color: oklch(0.975 0.010 206); } @supports not (background-color: oklch(0.975 0.010 206)) { .fond-descente { background-color: #F2F8F9; } } .titre-section, .intro-section, .encart-mercredi h2, .encart-mercredi p, .asso h2, .asso-texte span, .carte-bento, .media, .media-para, .media-para img, .video-facade, .video-bouton img, .respiration, .hero-photo, .hero-voile, .hero-texte { animation: none; clip-path: none; opacity: 1; transform: none; } .hero h1 span, .hero-phrase, .hero-cta, .bandeau-page h1, .bandeau-page-phrase, .bandeau-page-image, .entete { /* Les animations d'entrée (time-based) restent : elles ne dépendent pas du scroll. */ } } /* ---------- 21. Reduced motion : tout est coupé ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; clip-path: none !important; } .hero-photo, .hero-voile, .hero-texte, .hero h1 span, .hero-phrase, .hero-cta, .titre-section, .intro-section, .carte-bento, .media, .media-para, .media-para img, .asso h2, .asso-texte span, .bandeau-page h1, .bandeau-page-phrase, .bandeau-page-image, .encart-mercredi h2, .encart-mercredi p, .video-facade, .respiration, .entete { opacity: 1 !important; transform: none !important; } .fond-descente { background-color: #F2F8F9 !important; } .bulle { display: none !important; } } /* ---------- 22. Media queries ---------- */ @media (max-width: 1080px) { .nav-liens { display: none; } .menu-mobile { display: block; } } @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento > * { grid-column: auto; grid-row: auto; min-height: 240px; } .bento-chiffres { grid-template-columns: 1fr; } .portes, .asso, .chapitres { grid-template-columns: 1fr; } .bandeau-membres { grid-template-columns: 1fr; } .bandeau-page { grid-template-columns: 1fr; } .bandeau-page-image { aspect-ratio: 16 / 9; min-height: 0; } .bandeau-page-image img { position: static; } } @media (max-width: 480px) { .entete .btn-corail { padding: 0 14px; font-size: 15px; } .entete-int { gap: 12px; } } /* ============================================================ 23. PAGES INTÉRIEURES — ajouts v0.2.0 ============================================================ */ /* Fond « douceur » des pages intérieures (plus léger que la descente de l'accueil) */ .fond-douceur { animation: fondDouceur linear both; animation-timeline: scroll(root block); } @keyframes fondDouceur { 0% { background-color: #FFFFFF; } 74% { background-color: oklch(0.98 0.008 206); } 100% { background-color: oklch(0.955 0.016 206); } } @keyframes traitTemps { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Barre d'ancres de section */ .ancres { border-bottom: 1px solid var(--filet-2); } .ancres-int { max-width: var(--largeur); margin: 0 auto; padding: 6px 24px; display: flex; gap: 6px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ancres-int a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--profond); font-size: 1rem; } .ancres-int a:hover { background: var(--ecume); color: var(--profond); } /* Titre de section, variante intérieure (plus petite que l'accueil) */ .titre-section--page { margin: 0 0 16px; transform-origin: left center; font-family: var(--font-titre); font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.016em; text-wrap: balance; font-variation-settings: 'wdth' 106, 'wght' 740; animation: poseTitre linear both; animation-timeline: view(); animation-range: entry 4% entry 60%; } .texte-page { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--encre-3); text-wrap: pretty; } .texte-page--anim { animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 52%; } .note-page { margin: 18px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); } /* ---- Frise chronologique (Le Club) ---- */ .frise { position: relative; --col: clamp(104px, 11vw, 164px); --gouttiere: clamp(18px, 2.4vw, 30px); --retrait: clamp(30px, 4vw, 48px); } .frise-trait { position: absolute; left: calc(var(--col) + var(--gouttiere) + 6px); top: 10px; bottom: 10px; width: 2px; background: var(--lagon); transform-origin: top center; animation: traitTemps linear both; animation-timeline: view(); animation-range: entry 20% exit 30%; } .frise ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 44px); } .frise li { display: grid; grid-template-columns: var(--col) 1fr; gap: var(--gouttiere); align-items: start; animation: pose linear both; animation-timeline: view(); animation-range: entry 6% entry 50%; } .frise-date { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 96, 'wght' 800; font-size: clamp(1rem, 1.3vw, 1.375rem); line-height: 1.15; hyphens: none; letter-spacing: -0.015em; color: var(--profond); font-variant-numeric: tabular-nums; text-align: right; } .frise-corps { position: relative; padding-left: var(--retrait); } .frise-pastille { position: absolute; left: -1px; top: 6px; width: 14px; height: 14px; border-radius: 999px; border: 3px solid var(--blanc); background: var(--lagon); } .frise-pastille--bateau { background: var(--corail); } .frise-nature { margin: 0 0 4px; font-size: 0.9375rem; color: var(--lien-fonce); } .frise-corps h3 { margin: 0 0 6px; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: 1.125rem; line-height: 1.2; } .frise-texte { margin: 0; max-width: 64ch; font-size: 1rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; } /* ---- Gestes (Esprit Asso) ---- */ .gestes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .gestes li { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; } .gestes li > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .geste-titre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--profond); } .geste-num { display: flex; align-items: center; justify-content: center; flex: none; width: 68px; height: 68px; border-radius: 12px; background: var(--ecume); color: var(--lien-fonce); font-family: var(--font-titre); font-variation-settings: 'wght' 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; } .geste-texte { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; } .geste--span2 { grid-column: span 2; } .geste--span3 { grid-column: span 3; } .geste--span4 { grid-column: span 4; } .gestes li.geste--profond { background: var(--profond); border-color: var(--profond); padding: 30px; } .gestes li.geste--profond .geste-titre { color: var(--blanc); font-size: 1.75rem; } .gestes li.geste--profond .geste-texte { color: var(--ecume-2); } .gestes li.geste--profond .geste-num { width: 84px; height: 84px; margin: -10px -14px 0 0; background: rgba(230, 244, 246, 0.18); color: var(--ecume-2); } .gestes li.geste--lagon { background: var(--lagon); border-color: var(--lagon); padding: 30px; } .gestes li.geste--lagon .geste-titre { color: var(--blanc); font-size: 1.75rem; } .gestes li.geste--lagon .geste-texte { color: var(--blanc); } .gestes li.geste--lagon .geste-num { width: 92px; height: 92px; margin: -12px -16px 0 0; background: rgba(255, 255, 255, 0.22); color: var(--blanc); } .gestes li.geste--ecume { background: var(--ecume); border-color: #CFE7EB; } .gestes li.geste--ecume .geste-num { background: var(--blanc); } .gestes li.geste--petit .geste-titre { font-size: 1.375rem; } .gestes li.geste--petit .geste-num { width: 60px; height: 60px; } /* ---- Deux colonnes (encadrants, offre/matériel) ---- */ .deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .brevets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .brevet { display: flex; align-items: baseline; gap: 14px; padding: 22px 24px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 54%; } .brevet-n { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820; font-size: 2.5rem; line-height: 0.9; letter-spacing: -0.02em; color: var(--lien-fonce); font-variant-numeric: tabular-nums; } .brevet-libelle { margin: 0; font-size: 1.0625rem; line-height: 1.35; } .brevet-libelle span { display: block; font-size: 0.9375rem; color: var(--encre-2); } .brevet--plein { background: var(--ecume); border-color: #CFE7EB; align-items: center; } .brevet--plein p { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; color: var(--profond); } /* ---- Documents à télécharger ---- */ .documents { display: flex; flex-direction: column; gap: 10px; } .document { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; min-height: 48px; padding: 18px 22px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); text-decoration: none; color: var(--profond); } .document:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); } .document-titre { display: block; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; line-height: 1.3; } .document-mention { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--encre-2); } .document-format { font-size: 0.9375rem; color: var(--lien-fonce); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- Partenaires ---- */ .partenaires { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .partenaire { display: flex; flex-direction: column; gap: 12px; } .partenaire-logo { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); filter: grayscale(1); opacity: 0.75; transition: filter 300ms ease, opacity 300ms ease; } .partenaire-logo:hover { filter: grayscale(0); opacity: 1; } .partenaire-logo p { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 0.9375rem; color: var(--lien-fonce); } .partenaire-nom { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; } .partenaire-texte { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; } /* ---- Rythme de la semaine (Plonger) ---- */ .rythme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .rythme-carte { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; } .rythme-quand { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--profond); } .rythme-detail { margin: 0; font-size: 0.9375rem; color: var(--lien-fonce); } .rythme-texte { margin: 6px 0 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; } .rythme-carte--profond { background: var(--profond); border-color: var(--profond); } .rythme-carte--profond .rythme-quand { color: var(--blanc); } .rythme-carte--profond .rythme-detail { color: #A9DCE5; } .rythme-carte--profond .rythme-texte { color: var(--ecume-2); } /* ---- Listes offre / matériel ---- */ .liste-lignes { display: flex; flex-direction: column; } /* v1.4.4 — l'ancienne grille « minmax(0, 1fr) auto » laissait la colonne auto du détail prendre toute sa longueur avant de partager : un détail long écrasait le nom à la largeur d'une lettre. Le nom garde désormais au moins son mot le plus long, et les deux colonnes partagent 2/3. */ .liste-lignes p { display: grid; grid-template-columns: minmax(min-content, 2fr) minmax(0, 3fr); gap: 6px 20px; align-items: baseline; margin: 0; padding: 14px 2px; border-top: 1px solid var(--filet-2); font-size: 1.0625rem; } .liste-lignes p:first-child { border-top: 0; } .liste-nom { font-family: var(--font-titre); font-variation-settings: 'wght' 700; } .liste-detail { font-size: 0.9375rem; color: var(--encre-2); text-align: right; } .materiel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .materiel p { margin: 0; padding: 18px 20px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; } .materiel p span { display: block; margin-top: 4px; font-family: var(--font-texte); font-variation-settings: normal; font-size: 0.9375rem; color: var(--encre-3); } /* ---- Sites de plongée ---- */ .filtres-sites { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .filtre-site { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc); color: var(--profond); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem; cursor: pointer; text-decoration: none; } .filtre-site:hover { border-color: var(--lagon); color: var(--profond); } .filtre-site[aria-pressed="true"] { background: var(--profond); border-color: var(--profond); color: var(--blanc); } .compte-sites { margin: 0 0 24px; font-size: 0.9375rem; color: var(--lien-fonce); font-variant-numeric: tabular-nums; } .sites-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .site-carte { display: flex; flex-direction: column; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 40%; } .site-visuel { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--profond); } .site-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); } .site-carte:hover .site-visuel img { transform: scale(1.06); } .site-zone { position: absolute; left: 12px; top: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--profond); font-size: 0.875rem; font-family: var(--font-titre); font-variation-settings: 'wght' 700; } .site-corps { padding: 18px 20px 20px; } .site-corps h3 { margin: 0 0 10px; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: 1.1875rem; line-height: 1.2; } .site-corps dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9375rem; } .site-corps dt { color: var(--encre-2); } .site-corps dd { margin: 0; text-align: right; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-variant-numeric: tabular-nums; } /* Bandeau image pleine largeur (Où l'on plonge) */ .bande-image { position: relative; height: clamp(240px, 34dvh, 420px); border-radius: 14px; overflow: clip; animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 86% cover 100%; } .duo-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } /* ---- Media queries des pages intérieures ---- */ @media (max-width: 900px) { .deux-colonnes, .brevets, .partenaires { grid-template-columns: 1fr; } .gestes { grid-template-columns: 1fr; } .gestes li { grid-column: auto; } .rythme { grid-template-columns: 1fr; } .materiel { grid-template-columns: 1fr; } .frise { --col: 62px; } } @media (max-width: 560px) { .partenaires { grid-template-columns: repeat(2, 1fr); } .document { grid-template-columns: 1fr; } .document-format { text-align: left; } /* Téléphone : le nom puis son détail, l'un sous l'autre. */ .liste-lignes p { grid-template-columns: minmax(0, 1fr); gap: 2px; } .liste-detail { text-align: left; } } /* ============================================================ 24. COULEUR — v0.3.0 Le site restait bleu sur bleu. On introduit trois accents chauds (sable, ambre, corail sourd) réservés aux fonds et aux filets, jamais au texte courant. Contrastes vérifiés au calcul. ============================================================ */ :root { --sable: #FFF4E6; /* fond chaud très clair */ --sable-bord: #F6DFC0; --ambre: #8C491A; /* encre chaude, 6,3:1 sur --sable, 6,8:1 sur blanc */ --menthe: #E1F2E8; /* fond frais alternatif */ --menthe-bord:#BFDDCB; --vert: #2F6B4A; /* encre verte, 6,3:1 sur --menthe */ } /* Alternance de fonds : une section sur deux respire dans une autre teinte */ .bloc-sable { background: var(--sable); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } .bloc-ecume { background: var(--ecume); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } /* Badges déclinés par teinte */ .badge--sable { background: var(--sable); color: var(--ambre); } .badge--menthe { background: var(--menthe); color: var(--vert); } /* Gestes : deux variantes chaudes de plus, pour casser le monochrome */ .gestes li.geste--sable { background: var(--sable); border-color: var(--sable-bord); } .gestes li.geste--sable .geste-num { background: var(--blanc); color: var(--ambre); } .gestes li.geste--menthe { background: var(--menthe); border-color: var(--menthe-bord); } .gestes li.geste--menthe .geste-num { background: var(--blanc); color: var(--vert); } /* Rythme : la carte « Dimanche » passe en ambre, celle du mercredi reste profonde */ .rythme-carte--sable { background: var(--sable); border-color: var(--sable-bord); } .rythme-carte--sable .rythme-detail { color: var(--ambre); } /* Brevets : alternance des couleurs de chiffres */ .brevet:nth-child(2n) .brevet-n { color: var(--ambre); } .brevet:nth-child(3n) .brevet-n { color: var(--vert); } /* Frise : filet de séparation chaud sur les étapes « bateau » */ .frise li:has(.frise-pastille--bateau) .frise-nature { color: var(--ambre); } /* Bande photo intercalaire, pleine largeur du conteneur */ .bande-photo { position: relative; height: clamp(220px, 32dvh, 380px); border-radius: 14px; overflow: clip; background: var(--profond); } .bande-photo img { width: 100%; height: 100%; object-fit: cover; } .bande-photo-legende { position: absolute; left: 18px; bottom: 16px; right: 18px; margin: 0; max-width: 46ch; color: var(--blanc); font-size: 1rem; line-height: 1.45; text-shadow: 0 1px 12px rgba(11, 79, 99, 0.85); } /* Documents : pastille de format colorée */ .document-format { padding: 4px 10px; border-radius: 999px; background: var(--sable); color: var(--ambre); } .document:hover .document-format { background: var(--blanc); } /* Sites : la puce de zone prend une couleur par zone */ .site-zone--Nord { background: var(--menthe); color: var(--vert); } .site-zone--Centre { background: rgba(255, 255, 255, 0.92); color: var(--profond); } .site-zone--Sud { background: var(--sable); color: var(--ambre); } /* ============================================================ 25. SE FORMER · NOUS REJOINDRE — v0.4.0 ============================================================ */ /* ---- Citation mise en exergue (mot de la présidente) ---- */ .exergue { margin: 0; max-width: 74ch; } .exergue blockquote { margin: 0; font-size: clamp(1.1875rem, 0.6vw + 1rem, 1.5rem); line-height: 1.55; color: var(--profond); text-wrap: pretty; animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 56%; } .exergue blockquote p { margin: 0 0 14px; } .exergue blockquote p:last-child { margin: 0; } .exergue figcaption { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--lagon); font-size: 1.0625rem; line-height: 1.5; } .exergue figcaption b { font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; } .exergue figcaption span { display: block; color: var(--encre-3); } /* ---- Niveaux FFESSM ---- */ .niveaux { display: flex; flex-direction: column; gap: 16px; } .niveau { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: 30px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; } .niveau h3 { margin: 0 0 6px; font-family: var(--font-titre); font-variation-settings: 'wdth' 114, 'wght' 800; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; } .niveau-profondeur { margin: 0 0 16px; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--lien-fonce); } .niveau-jauge { height: 10px; border-radius: 999px; background: var(--ecume); overflow: clip; } .niveau-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--lagon); } .niveau-echelle { margin: 8px 0 0; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; } .niveau-permet { margin: 0 0 16px; font-size: 1.125rem; line-height: 1.5; color: var(--profond); text-wrap: pretty; } .niveau dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 1rem; } .niveau dt { color: var(--encre-2); } .niveau dd { margin: 0; color: var(--encre-3); } .niveau--n2 { background: var(--sable); border-color: var(--sable-bord); } .niveau--n2 .niveau-profondeur { color: var(--ambre); } .niveau--n2 .niveau-jauge { background: var(--blanc); } .niveau--n2 .niveau-jauge span { background: var(--ambre); } .niveau--n3 { background: var(--profond); border-color: var(--profond); } .niveau--n3 h3, .niveau--n3 .niveau-permet { color: var(--blanc); } .niveau--n3 .niveau-profondeur { color: #A9DCE5; } .niveau--n3 .niveau-jauge { background: rgba(230, 244, 246, 0.2); } .niveau--n3 .niveau-jauge span { background: var(--corail); } .niveau--n3 .niveau-echelle, .niveau--n3 dt, .niveau--n3 dd { color: var(--ecume-2); } /* ---- Autres formations ---- */ .autres-formations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .autres-formations > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 48%; } .autres-formations p:first-child { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.125rem; line-height: 1.2; } .autres-formations p:last-child { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); } .autres-formations > div:nth-child(3n+2) { background: var(--menthe); border-color: var(--menthe-bord); } .autres-formations > div:nth-child(3n+2) p:last-child { color: var(--vert); } /* ---- Témoignages ---- */ .temoignages { display: grid; grid-template-columns: 1fr; gap: 12px; } .temoignage { margin: 0; padding: 24px 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; } .temoignage blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--profond); text-wrap: pretty; } .temoignage figcaption { margin-top: 14px; font-size: 1rem; color: var(--encre-3); } .temoignage figcaption b { font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; color: var(--profond); } .temoignage--profond { background: var(--profond); border-color: var(--profond); } .temoignage--profond blockquote { color: var(--blanc); } .temoignage--profond figcaption { color: var(--ecume-2); } .temoignage--profond figcaption b { color: var(--blanc); } .temoignage--sable { background: var(--sable); border-color: var(--sable-bord); } /* ---- Cotisations ---- */ .cotisations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cotisation { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 28px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; } .cotisation--phare { background: var(--profond); border-color: var(--profond); } .cotisation-marque { align-self: flex-start; margin: 0 0 4px; padding: 4px 12px; border-radius: 999px; background: var(--corail); color: var(--brou); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 0.875rem; } .cotisation-nom { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: 1.5rem; line-height: 1; } .cotisation-prix { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--lien-fonce); font-variant-numeric: tabular-nums; } .cotisation-qui { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; } .cotisation--phare .cotisation-nom { color: var(--blanc); } .cotisation--phare .cotisation-prix { color: var(--corail); } .cotisation--phare .cotisation-qui { color: var(--ecume-2); } .inclus-titre { margin: 28px 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem; } .inclus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .inclus p { margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 10px; background: var(--menthe); color: var(--profond); font-size: 1rem; line-height: 1.45; text-wrap: pretty; } .inclus p::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 999px; background: var(--vert); } /* ---- Étapes d'adhésion ---- */ .etapes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: etape; } .etapes li { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; } .etape-n { margin: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--sable); color: var(--ambre); font-family: var(--font-titre); font-variation-settings: 'wght' 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .etape-titre { margin: 4px 0 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem; line-height: 1.2; } .etape-texte { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; } .etape-lien { align-self: flex-start; margin-top: auto; padding-top: 8px; min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; } /* ---- Grille tarifaire (tables repliables) ---- */ .grille { display: flex; flex-direction: column; gap: 12px; } .repli { border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; } .repli > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 24px; cursor: pointer; list-style: none; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem; } .repli > summary::-webkit-details-marker { display: none; } .repli > summary:hover { background: var(--ecume); } .chevron { flex: none; width: 12px; height: 12px; border-right: 2px solid var(--lien-fonce); border-bottom: 2px solid var(--lien-fonce); transform: rotate(45deg); transition: transform 220ms ease; } .repli[open] .chevron { transform: rotate(225deg); } .repli table { width: 100%; border-collapse: collapse; } .repli caption { padding: 0 24px 12px; text-align: left; font-size: 0.9375rem; color: var(--encre-2); } .repli th { text-align: left; font-weight: normal; padding: 14px 24px; border-top: 1px solid var(--ecume); font-size: 1.0625rem; color: var(--profond); } .repli th span { display: block; font-size: 0.9375rem; color: var(--encre-2); } .repli td { text-align: right; padding: 14px 24px; border-top: 1px solid var(--ecume); font-family: var(--font-titre); font-variation-settings: 'wght' 740; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- FAQ ---- */ .faq { display: flex; flex-direction: column; gap: 10px; } .faq .repli > summary { font-size: 1.0625rem; font-variation-settings: 'wdth' 104, 'wght' 720; } .faq .repli > p { margin: 0; padding: 0 24px 22px; max-width: 76ch; font-size: 1.0625rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; } /* ---- Media queries ---- */ @media (max-width: 900px) { .niveau { grid-template-columns: 1fr; padding: 24px; } .autres-formations, .cotisations, .etapes { grid-template-columns: 1fr; } } @media (min-width: 561px) and (max-width: 900px) { .autres-formations, .etapes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .repli th, .repli td { padding-left: 18px; padding-right: 18px; } .repli > summary { padding-left: 18px; padding-right: 18px; } } /* ============================================================ 26. CONTACT · ESPACE MEMBRES — v0.4.0 ============================================================ */ /* Grilles génériques */ .trois-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .quatre-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* Cartes de contact */ .carte-contact { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; } .carte-contact--sable { background: var(--sable); border-color: var(--sable-bord); } .carte-contact--profond { background: var(--profond); border-color: var(--profond); } .carte-contact-titre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 780; font-size: 1.5rem; line-height: 1; color: var(--profond); } .carte-contact p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; } .carte-contact-tel { font-family: var(--font-titre); font-variation-settings: 'wght' 780; font-size: 1.375rem; } .carte-contact.carte-contact--profond .carte-contact-titre { color: var(--blanc); } .carte-contact.carte-contact--profond p { color: var(--ecume-2); } .carte-contact.carte-contact--profond a { color: var(--blanc); } .carte-contact a { min-height: 44px; display: inline-flex; align-items: center; } /* Formulaire */ .formulaire { display: flex; flex-direction: column; gap: 20px; } .champs-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .champ { display: flex; flex-direction: column; gap: 8px; } .champ label { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem; color: var(--profond); } .champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--filet); background: var(--blanc); color: var(--profond); font-family: var(--font-texte); font-size: 1.0625rem; line-height: 1.4; -webkit-appearance: none; appearance: none; } .champ select { background-image: linear-gradient(45deg, transparent 50%, var(--lien-fonce) 50%), linear-gradient(135deg, var(--lien-fonce) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; } .champ textarea { min-height: 160px; resize: vertical; } .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--lagon); outline-offset: 2px; border-color: var(--lagon); } .champ-note { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); } .leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Formulaire — retours du serveur (v1.1.0) */ .formulaire-alerte { margin: 0 0 20px; padding: 16px 20px; border-radius: 12px; background: var(--sable); border: 1.5px solid var(--sable-bord); border-left-width: 4px; border-left-color: var(--ambre); color: var(--ambre); font-size: 1rem; line-height: 1.55; } .formulaire-alerte p { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; } .formulaire-alerte ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .formulaire-alerte a { color: var(--ambre); } .champ-erreur { color: var(--ambre); font-variation-settings: 'wght' 600; } .champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--ambre); } /* Compteur de caractères. Posé par formulaire.js, absent sans JavaScript. */ .champ-compteur { margin: 0; align-self: flex-end; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; } .champ-compteur--limite { color: var(--ambre); font-variation-settings: 'wght' 600; } /* Bouton d'envoi. La largeur ne suit pas la colonne sur ordinateur, mais la prend entièrement sous 600 px : une cible pleine largeur se vise mieux au pouce, et évite le tir manqué sur le bord. */ .bouton-envoi { align-self: flex-start; border: 0; cursor: pointer; } .bouton-envoi[disabled] { opacity: .6; cursor: progress; } .bouton-envoi[disabled]:hover { background: var(--corail); } /* Colonne latérale : carte et horaires */ .carte-lieu { position: relative; display: block; border-radius: 14px; overflow: clip; background: var(--profond); aspect-ratio: 16 / 10; text-decoration: none; } .carte-lieu img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); } .carte-lieu:hover img { transform: scale(1.04); } .carte-lieu-etiquette { position: absolute; left: 14px; bottom: 14px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--blanc); color: var(--profond); font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1rem; box-shadow: 0 6px 20px rgba(11, 79, 99, 0.22); } .carte-lieu-etiquette::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--corail); } .liens-plan { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .liens-plan a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc); color: var(--profond); text-decoration: none; font-size: 1rem; } .liens-plan a:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); } .horaires-bloc { margin-top: 20px; padding: 24px; border-radius: 14px; background: var(--menthe); border: 1px solid var(--menthe-bord); } .horaires-bloc > p:first-child { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem; color: var(--profond); } .horaires-bloc p { margin: 0 0 10px; font-size: 1rem; line-height: 1.5; color: var(--encre-3); } .horaires-bloc p:last-child { margin: 0; } .horaires-bloc b { display: block; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; color: var(--profond); } /* Encart plein largeur (mercredi soir, première connexion) */ .encart-plein { padding: clamp(28px, 4vw, 48px); border-radius: 14px; background: var(--profond); } .encart-plein h2 { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; color: var(--blanc); text-wrap: balance; } .encart-plein p { margin: 0; max-width: 66ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ecume-2); text-wrap: pretty; } .encart-plein a { color: var(--blanc); } /* Espace membres : les quatre usages */ .usage { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; } .usage-forme { width: 34px; height: 34px; background: var(--lagon); } .usage-forme--corail { background: var(--corail); } .usage-titre { margin: 4px 0 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem; } .usage p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; } /* Bloc d'ouverture du PAD */ .bloc-pad { text-align: center; padding: clamp(36px, 6vw, 64px) clamp(24px, 4vw, 48px); border-radius: 14px; background: var(--profond); } .bloc-pad-titre { margin: 0 0 22px; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 780; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.05; color: var(--blanc); text-wrap: balance; } .bloc-pad .btn { font-size: 1.1875rem; padding: 0 34px; min-height: 56px; } .bloc-pad-note { margin: 22px auto 0; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--ecume-2); text-wrap: pretty; } /* Modes d'emploi iOS / Android */ .repli ol { margin: 0; padding: 0 24px 22px 46px; display: flex; flex-direction: column; gap: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--encre-3); } @media (max-width: 900px) { .trois-colonnes, .quatre-colonnes, .champs-duo { grid-template-columns: 1fr; } .bouton-envoi { align-self: stretch; } } @media (min-width: 561px) and (max-width: 900px) { .quatre-colonnes { grid-template-columns: repeat(2, 1fr); } } .carte-lieu-source-hors { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--encre-2); } .carte-lieu-source-hors a { color: var(--encre-2); } /* ================================================================== CARTE DES SITES — /plonger/ (v0.7.0) Bandeau pleine largeur, hors conteneur : la carte a besoin de place, l'ancien encart sticky de 420 px était trop étroit pour lire la côte. Pas de 100vw ici — le bandeau est simplement placé hors .conteneur, ce qui évite la barre de défilement comptée en trop sous Windows. ================================================================== */ .carte-bandeau { position: relative; margin: clamp(24px, 4vw, 40px) 0; min-height: 420px; background: var(--profond); overflow: clip; isolation: isolate; } @media (min-width: 761px) { .carte-bandeau { min-height: 62vh; max-height: 720px; } } /* Façade : CSS pur, aucune image, aucune requête réseau. */ .carte-facade { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; } .carte-facade[hidden] { display: none; } .carte-facade-fond { position: absolute; inset: -10%; background: radial-gradient(34% 30% at 24% 26%, rgba(230, 244, 246, 0.32), transparent 70%), radial-gradient(46% 34% at 70% 66%, rgba(42, 165, 184, 0.5), transparent 74%), linear-gradient(160deg, #0B4F63 0%, #08394A 100%); } .carte-facade-contenu { position: relative; text-align: center; padding: 32px 24px; max-width: 46ch; display: grid; gap: 12px; justify-items: center; } .carte-facade-titre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.1; color: var(--blanc); font-variant-numeric: tabular-nums; } .carte-facade-texte { margin: 0; color: var(--ecume); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; } .carte-facade-note { margin: 4px 0 0; color: rgba(230, 244, 246, 0.72); font-size: 0.8125rem; } /* v1.4.4 — c'est un