/* ============================================================ Pages intérieures — blog, galerie, activités, tarifs, contact ============================================================ */ /* En-tête de page. La marge haute compense la barre fixe, qui recouvrirait sinon le surtitre. */ .page-head { padding-top: calc(var(--header-h) + var(--sec-py)); } .page-head .eyebrow { margin-bottom: 18px; } .page-head .lede { margin-top: 20px; } .page-head .t-page { max-width: 20ch; } .page-head .wrap.narrow .t-page { max-width: none; } .section-lead { margin-bottom: 24px; } .section-lead--spaced { margin-top: clamp(48px, 7vw, 72px); } .empty-state { padding: 48px 24px; text-align: center; color: var(--text-50); border: 1px dashed var(--line); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: 28px; } /* ---------------------------------------------------------- Blog ---------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .post-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 32px); background: var(--bg); } .post-card__tag { align-self: flex-start; padding: 4px 10px; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #ff7c8c; background: rgba(var(--red-rgb), 0.14); } .post-card__date { font-size: 12px; letter-spacing: 0.06em; color: var(--text-50); } .post-card__title { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.15; } .post-card__title a:hover { color: var(--red); } .post-card__excerpt { flex-grow: 1; font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--text-60); } .pagination { display: flex; justify-content: space-between; gap: var(--gap-sm); margin-top: 32px; } .link-back { font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-60); } .link-back::before { content: '← '; } .link-back:hover { color: var(--red); } /* ---------------------------------------------------------- Article La colonne est bornée en ch, pas en pixels : la longueur de ligne confortable se mesure en caractères, quelle que soit la taille de police choisie par la lectrice. ---------------------------------------------------------- */ .article { padding-top: calc(var(--header-h) + var(--sec-py)); } .article__meta { margin-bottom: 24px; } .article__title { margin-bottom: 14px; } .article__byline { margin-bottom: 40px; font-size: 12px; letter-spacing: 0.06em; color: var(--text-50); } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.1em; } .prose p, .prose li { font-weight: 300; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.8; color: var(--text-80); } /* * Justification du corps de texte long. * * `hyphens: auto` n'est PAS optionnel ici : sans césure, justifier une * colonne étroite creuse des rivières de blanc entre les mots. Le * navigateur ne peut couper correctement que parce que * est déclaré — la coupure suit les règles de la langue. * * Réservé à .prose, c'est-à-dire aux paragraphes longs. Un chapô, une * note ou un libellé d'interface restent au fer à gauche : sur deux ou * trois lignes, la justification déforme sans rien apporter. */ .prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* * Sous 640px la colonne devient trop étroite : même avec césure, la * justification y produit des espaces béants. On revient au fer à gauche, * qui reste le plus lisible sur petit écran. */ @media (max-width: 640px) { .prose p { text-align: left; } } .prose h2 { margin-top: 1.8em; font-size: clamp(20px, 2.6vw, 26px); } .prose h3 { margin-top: 1.6em; font-size: clamp(17px, 2.2vw, 21px); } .prose strong { font-weight: 700; color: var(--text); } .prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.2em; } .prose ul li { list-style: none; position: relative; padding-left: 20px; } .prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--red); } .prose ol { list-style: decimal; } .prose ol li { list-style: decimal; } .prose blockquote { padding-left: 20px; border-left: 2px solid var(--red); font-style: italic; color: var(--text-70); } .prose img { margin-block: 1.6em; width: 100%; } .prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text-50); } .prose hr { margin-block: 2em; border: none; border-top: 1px solid var(--line); } .prose code { padding: 2px 5px; font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--bg-alt); } /* ---------------------------------------------------------- Galerie ---------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .gallery__item { aspect-ratio: 1; overflow: hidden; background: var(--bg-ph); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-filter-soft); transition: transform 0.6s var(--ease), filter var(--dur-base) var(--ease); } .gallery__item:hover img { transform: scale(1.04); filter: none; } /* ---------------------------------------------------------- Activités en pleine page ---------------------------------------------------------- */ .activities--page { border-top: none; } /* ---------------------------------------------------------- Contact ---------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap-xl); align-items: start; } .contact-form { display: flex; flex-direction: column; gap: 8px; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); } .contact-form .btn { align-self: flex-start; margin-top: 18px; } .form-label { display: block; margin-top: 14px; margin-bottom: 6px; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-60); } .form-note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--text-50); } /* * Leurre anti-robot. Masqué par position plutôt que par display:none : * certains robots ignorent les champs non affichés, et le remplissent * d'autant plus volontiers quand ils semblent présents. * aria-hidden et tabindex=-1 le rendent invisible aux lecteurs d'écran * et à la navigation au clavier. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-aside { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); } .contact-block { padding: 22px; background: var(--bg-alt); } .contact-block--accent { background: rgba(var(--red-rgb), 0.08); } .contact-block__title { margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-60); } .contact-block p { font-size: 14px; line-height: 1.7; } .contact-block a { color: var(--red); } .contact-block__place + .contact-block__place { margin-top: 12px; } .contact-block__place strong { display: block; font-weight: 600; color: var(--text-80); } .contact-block__place span { display: block; font-weight: 300; color: var(--text-60); } .contact-block__big { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; color: var(--red); } .error-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .error-list li { padding: 12px 14px; font-size: 14px; background: rgba(var(--red-rgb), 0.12); border-left: 3px solid var(--red); } /* ---------------------------------------------------------- Espace membres ---------------------------------------------------------- */ .member-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; } .member-login { display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .member-login .btn { align-self: flex-start; margin-top: 20px; } .member-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-xl); align-items: start; } .member-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); } .member-item { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--bg); } .member-item__title { font-size: 18px; line-height: 1.2; } .member-item__title a:hover { color: var(--red); } .member-item__meta { font-size: 12px; letter-spacing: 0.06em; color: var(--text-50); } .member-item__desc { font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--text-60); } .member-side { display: flex; flex-direction: column; gap: var(--gap-md); } .member-box { padding: 20px; border: 1px solid var(--line); background: var(--bg); } .member-box__title { margin-bottom: 14px; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-60); } /* ---------------------------------------------------------- Liste de documents ---------------------------------------------------------- */ .doc-list { display: flex; flex-direction: column; } .doc-list--compact { gap: 12px; } .doc-list--compact li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .doc-list--compact a:hover { color: var(--red); } .doc-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: var(--gap-md); padding-block: 20px; border-bottom: 1px solid var(--line); } .doc-row:first-child { border-top: 1px solid var(--line); } .doc-kind { display: grid; place-items: center; padding: 8px 0; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); border: 1px solid var(--line-strong); } .doc-title { font-size: 17px; line-height: 1.25; } .doc-desc { margin-top: 4px; font-weight: 300; font-size: 14px; color: var(--text-60); } .doc-meta { margin-top: 4px; font-size: 12px; letter-spacing: 0.04em; color: var(--text-50); } /* ---------------------------------------------------------- Messages éphémères ---------------------------------------------------------- */ .flash { margin-bottom: 20px; padding: 12px 14px; font-size: 14px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--text-50); } .flash--success { border-left-color: #3ddc84; } .flash--error { border-left-color: var(--red); background: rgba(var(--red-rgb), 0.1); } /* ---------------------------------------------------------- Foire aux questions ---------------------------------------------------------- */ .faq-list { max-width: 800px; margin-top: 12px; } /* ---------------------------------------------------------- Adaptation mobile ---------------------------------------------------------- */ @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } .member-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { /* Le bouton passe sous le texte : à cette largeur, une troisième colonne réduirait le titre à deux mots par ligne. */ .doc-row { grid-template-columns: 68px minmax(0, 1fr); } .doc-row .btn { grid-column: 1 / -1; } } @media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } .pagination { flex-direction: column; } .page-head .t-page { max-width: none; } } /* ---------------------------------------------------------- Formulaire d'inscription ---------------------------------------------------------- */ .reg-form { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); } /* * Les sections du formulaire ne sont PAS des
. * * Un se positionne dans la bordure du fieldset et sa largeur se * limite à son texte : le fond du parent transparaît de part et d'autre. * Le contourner par float:100% règle l'apparence mais fait déborder le * flottement sur la grille suivante — les champs se décalent. * * On utilise donc un conteneur ordinaire porteur de role="group" et * aria-labelledby, l'équivalent ARIA documenté de fieldset/legend : les * lecteurs d'écran annoncent le groupe à l'identique, sans aucune des * règles de mise en page particulières du . */ .reg-block { padding: clamp(24px, 3vw, 32px); background: var(--bg-alt); border: none; } .reg-legend { display: block; width: 100%; padding: 0 0 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } /* Court trait rouge en amorce : reprend le vocabulaire des titres de section du site sans en avoir le poids typographique. */ .reg-legend::before { content: ''; display: inline-block; width: 20px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--red); } /* Le premier champ suit immédiatement la légende : sa marge haute ferait double emploi avec celle du titre. */ .reg-block > .form-label:first-of-type { margin-top: 0; } .reg-block .reg-row:first-of-type .form-label { margin-top: 0; } .reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); } /* Case à cocher : la cible cliquable couvre tout le libellé, pas seulement le carré de 16 pixels. */ .reg-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px; font-size: 14px; line-height: 1.6; color: var(--text-80); border: 1px solid var(--line-strong); cursor: pointer; } .reg-check input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--red); } .reg-check a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .reg-block .btn { margin-top: 18px; } @media (max-width: 600px) { .reg-row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- Créneaux d'entraînement ---------------------------------------------------------- */ .schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .schedule__item { padding: clamp(24px, 3vw, 32px); background: var(--bg); } .schedule__place { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.15; } .schedule__when { margin-top: 10px; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--text-70); } /* * Le créneau porte l'information la plus utile : on le détache. * * ⚠️ Surtout PAS ::first-line, qui colore ce qui tient sur la première * ligne RENDUE : sur écran étroit la coupure tombait au milieu du nom * de la salle, et « Dojo du » passait en rouge sans « Moulin à Vent ». * La couleur doit suivre le sens, donc l'élément. */ .schedule__day { display: block; color: var(--red); } .schedule__venue { display: block; color: var(--text-70); } /* L'adresse est secondaire face au créneau : plus petite, soulignée seulement au survol pour ne pas concurrencer le nom de la salle. */ .schedule__address { display: block; margin-top: 6px; color: var(--text-70); font-size: 0.92em; text-decoration: none; } .schedule__address:hover, .schedule__address:focus-visible { color: var(--red); text-decoration: underline; } /* ---------------------------------------------------------- Pages légales ---------------------------------------------------------- */ /* Signale sans ambiguïté une information manquante : sur une page qui engage juridiquement, un trou visible vaut mieux qu'une approximation. */ .legal-todo { padding: 2px 8px; font-weight: 600; font-size: 0.85em; color: #ffb84d; background: rgba(255, 184, 77, 0.12); border: 1px dashed rgba(255, 184, 77, 0.4); } .legal-updated { margin-top: 2.4em; font-size: 12.5px; color: var(--text-50); } /* ---------------------------------------------------------- Choix du mode de règlement, après inscription Deux colonnes de largeur égale : aucun des deux chemins n'est secondaire, seule la couleur indique celui que le club préfère. ---------------------------------------------------------- */ .cta-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; max-width: 620px; } .cta-choix__item { margin: 0; } /* Dans le système, .btn--red est plus haut que .btn--ghost — une hiérarchie voulue ailleurs. Ici les deux options sont de rang égal : l'écart de hauteur se lirait comme un défaut d'alignement. */ .cta-choix .btn { padding-block: 16px; } /* Le bouton fantôme porte un filet d'un pixel, pas le rouge : sans ce filet transparent, il reste 2 px d'écart entre les deux. */ .cta-choix .btn--red { border: 1px solid transparent; } .cta-choix__note { display: block; margin-top: 8px; font-size: 12px; font-weight: 300; line-height: 1.5; text-align: center; color: var(--text-50); } /* Astérisque des champs obligatoires. Décorative : `required` porte déjà l'information pour les lecteurs d'écran. */ .req { color: var(--red); font-weight: 700; } .form-legend { margin-top: 14px; font-size: 12px; font-weight: 300; color: var(--text-50); } /* ---------------------------------------------------------- Rubrique « Le club » — nos valeurs Filets 1px et aucun arrondi, comme le reste du système. Le titre de chaque valeur est détaché en gras sur sa propre ligne. ---------------------------------------------------------- */ /* * Deux colonnes fixes au-delà de 700px, et non `auto-fit` : avec quatre * valeurs dans une colonne de 840px, l'ajustement automatique en * produisait trois, laissant la quatrième seule sur sa ligne. Deux fois * deux se lit mieux et reste stable si une valeur est ajoutée. */ .values { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); } .values li { padding: clamp(20px, 2.6vw, 28px); background: var(--bg); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--text-60); } .values strong { display: block; margin-bottom: 6px; font-weight: 700; color: var(--text); } @media (min-width: 700px) { .values { grid-template-columns: repeat(2, 1fr); } }