/* =============================================================================
LE REBOND PADEL AND CO — Auchel · client.css
L'UNIVERS du club, chargé APRÈS style.css (la base du kit).
-----------------------------------------------------------------------------
Brief DA (2026-08-11) : thème CLAIR, fond BEIGE (leur choix, plutôt que blanc),
trio terracotta / vert sauge / beige donné par le club (charte fournie).
Ambiance CONVIVIALE et chaleureuse — arrondis généreux, fonte ronde (Quicksand),
dynamisme FLUIDE (défaut du kit, aucune classe sur ).
MÉTHODE : les tokens --accent-strong / --accent-text / --accent-fonce du kit
pointent déjà sur --brand-fonce par défaut (voir style.css « --accent est ROI ») :
une seule redéfinition de la marque suffit à reteinter nav (.c-nav--dark),
CTA (.c-cta) et boutons pleins, sans toucher à leurs règles.
Contrastes calculés (formule WCAG relative luminance), ratios en commentaire.
============================================================================= */
:root {
color-scheme: light;
/* --- Marque : terracotta du logo ----------------------------------------
--brand le terracotta brut du logo, pour les touches décoratives
--brand-fonce le même, foncé : porte le texte et les aplats (5,7:1 sur
blanc côté cartes, 5,1:1 sur le fond beige de page)
--brand-pale un voile de terracotta très clair pour les badges */
--brand: #C45824;
--brand-fonce: #A84A1D;
--brand-pale: #FBE7DA;
--accent-strong: var(--brand-fonce); /* aplats + texte blanc : 5,73:1 */
--accent-text: var(--brand-fonce); /* liens et chiffres : 5,73:1 / 5,07:1 */
/* --- La touche de vert sauge du logo -------------------------------------
--vert décoratif (pastilles, dégradés) — jamais en texte seul
--vert-fonce la même famille, foncée : coches et petites icônes (4,9:1) */
--vert: #8EB5A4;
--vert-fonce: #4F7A68;
/* --- FONDS : trois tons réellement distincts (règle N) ------------------
--bg #FEF0D7 leur beige — la page
--surface-2 #F7E2BC un cran plus soutenu — la rayure des sections
--surface #FFFFFF les CARTES — le plus clair des trois, pour qu'elles
se détachent du beige qui les porte
--surface-inverse #2B1B12 le pied de page : encre chaude, pas un noir plat */
--bg: #FEF0D7;
--surface: #FFFFFF;
--surface-2: #F7E2BC;
--surface-inverse: #2B1B12;
/* --- TEXTES --------------------------------------------------------------
--text 15,0:1 sur le beige · 17,1:1 sur une carte
--text-muted 5,7:1 sur le beige · 6,5:1 sur une carte
--text-subtle 3,3:1 sur le beige · 3,8:1 sur une carte (jamais pour du texte porteur de sens) */
--text: #2A2018;
--text-muted: #6B5C4E;
--text-subtle: #93816E;
--border: #E9D3AC;
--border-strong: #D8B888;
/* --- Typographie : ronde et chaleureuse, à l'image du logo -------------- */
--font-display: 'Quicksand', 'Inter', system-ui, sans-serif;
/* --- Arrondis GÉNÉREUX — le club se veut rond, pas anguleux ------------- */
--radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px;
--radius-lg: 24px; --radius-xl: 32px;
/* --- Dégradés de l'univers (déclarés une fois, réutilisés) -------------- */
--grad-terracotta: linear-gradient(135deg, var(--brand-fonce), var(--brand));
--grad-chaleur: linear-gradient(125deg, #8A3B14, var(--brand) 60%, #D9754A 130%);
--grad-encre: linear-gradient(160deg, #3A2417, var(--surface-inverse) 55%, #1C110B);
}
/* =============================================================================
ARRONDIS — les éléments d'action passent en pilules
============================================================================= */
.c-btn,
.c-storebtn,
.c-tabs__tab,
.c-nav__burger,
.c-arrow { border-radius: var(--radius-pill); }
.c-pricetable-wrap { border-radius: var(--radius-lg); overflow: hidden; }
/* =============================================================================
DÉGRADÉS — la chaleur du terracotta, dosée pour rester lisible
============================================================================= */
.c-btn--primary { background-image: var(--grad-terracotta); }
.c-cta:not(.c-cta--photo) { background-image: var(--grad-chaleur); }
.c-footer { background-image: var(--grad-encre); }
.c-card--featured { background-image: linear-gradient(135deg, var(--brand-pale), var(--surface)); }
/* Voiles des blocs sur photo : un peu plus chauds que le gris neutre du kit. */
.c-cta--photo::after { background: linear-gradient(180deg, hsl(18 45% 10% / 0.45), hsl(18 45% 8% / 0.82)); }
.c-hero--image::after { background: linear-gradient(180deg, hsl(18 45% 10% / 0.30), hsl(18 45% 8% / 0.72)); }
/* =============================================================================
LOGO — variante CLAIRE (beige) sur les fonds foncés du site
La nav NAV-02 est teintée par --accent-strong (terracotta) et le footer par
--grad-encre (brun très sombre) : le logo terracotta sur blanc s'y effacerait.
On y pose systématiquement le fichier « -clair » du même dessin.
============================================================================= */
.c-nav--dark .c-nav__logo img,
.c-footer__brand img { filter: none; }
/* =============================================================================
LA TOUCHE DE VERT — trois emplois, pas un de plus
============================================================================= */
/* ① les coches des checklists et checkrounds */
.c-checklist li::before,
.c-checkround li::before { color: var(--vert-fonce); }
/* ② les étiquettes de la mécanique c-taglist */
.c-pill { background: var(--vert); color: #1B2E26; }
/* ③ un filet sous le titre de chaque en-tête de section */
.c-features__head h2::after {
content: "";
display: block;
width: 3rem;
height: 3px;
margin: var(--s5) auto 0;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--brand), var(--vert));
}
/* =============================================================================
BOUTONS PLEINE LARGEUR — un libellé long ne doit jamais déborder
============================================================================= */
.c-btn--block { white-space: normal; padding-inline: var(--s4); }
/* =============================================================================
HORAIRES — jour par jour (règle P), sur une seule colonne
Le kit dispose `.c-hours` sur deux colonnes (été/hiver) : le club n'a qu'une
seule grille horaire, une colonne pleine largeur se lit d'un coup d'œil.
============================================================================= */
.c-contact__coord .c-hours,
.c-contactmap__card .c-hours { grid-template-columns: 1fr; }
/* =============================================================================
HÉROS DE L'ACCUEIL — retour du 2026-08-31 : jugé pas assez marquant, le
client a apporté une référence Nike (grand titre, décalé en bas à gauche de
l'image, plein bleed, bouton clair) plutôt que le héros centré du kit.
Variante posée UNIQUEMENT sur le héros de l'accueil (nouvelle classe
`.c-hero--impact`, à la main sur index.html) : les autres pages gardent le
héros standard, plus sobre, du reste du site.
============================================================================= */
.c-hero--impact {
min-height: min(86vh, 880px);
display: flex;
align-items: flex-end;
padding-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
.c-hero--impact .c-hero__inner {
max-width: none;
text-align: left;
justify-items: start;
}
.c-hero--impact .c-hero__title {
font-size: clamp(3rem, 1.6rem + 7vw, 7rem);
line-height: 0.95;
letter-spacing: var(--tracking-tight);
max-width: 13ch;
text-transform: uppercase;
font-family: var(--font-sans);
font-weight: var(--fw-black);
}
.c-hero--impact .c-hero__lead { max-width: 42ch; }
.c-hero--impact .c-hero__actions { justify-content: flex-start; }
@media (max-width: 640px) {
.c-hero--impact { min-height: min(78vh, 640px); align-items: flex-end; }
.c-hero--impact .c-hero__title { max-width: none; }
}
/* =============================================================================
SPORTS-03 — cinq disciplines (nombre impair) : 3 colonnes en mobile,
comportement déjà prévu par le kit selon le nombre de tuiles.
============================================================================= */
/* =============================================================================
AUCUNE CÉSURE — demandé par la collaboratrice. Le kit coupe automatiquement
les mots des titres en fin de ligne (hyphens: auto) ; ce client n'en veut pas.
============================================================================= */
h1, h2, h3, h4 { hyphens: none; }
/* =============================================================================
TITRES DE SECTION (H2) — retour du 2026-08-18 : trop petits pour se
distinguer du corps de texte. Le kit plafonne H2 à --fs-700 (10 · CORRECTIFS
v2 dans style.css) ; on repasse largement au-dessus pour ce client, qui veut
une hiérarchie beaucoup plus marquée entre titres et texte courant.
============================================================================= */
h2 {
font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.5rem);
line-height: 0.95;
font-family: var(--font-sans);
font-weight: var(--fw-black);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
}
.c-cta__title {
font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
line-height: 0.98;
font-family: var(--font-sans);
font-weight: var(--fw-black);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
}
/* Le grand titre appelle un texte d'accompagnement plus court, pas un pavé :
principe de mise en page repris de la référence apportée par le client
(2026-08-31) — gros titre, une ligne de texte, un bouton. */
.c-features__head p,
.c-hero__lead { max-width: 44ch; margin-inline: auto; }
/* =============================================================================
TITRES DE HÉROS (H1) — même principe : gros, gras, majuscules, sur toutes
les pages (pas seulement l'accueil). L'accueil garde son propre traitement,
encore plus grand, via .c-hero--impact ci-dessous.
============================================================================= */
.c-hero__title {
font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.5rem);
line-height: 0.98;
font-family: var(--font-sans);
font-weight: var(--fw-black);
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
}
.c-hero--split .c-hero__title,
.c-hero--center .c-hero__title { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); }
/* =============================================================================
MENU DESKTOP — ⚠️ tout ce bloc est scopé à ≥ 1024 px : en dessous, le kit
change complètement la nature de .c-nav__menu (tiroir plein écran en
colonne, .c-nav__panel repasse à plat). Une règle non scopée ici avait
forcé chaque
en display:flex SANS flex-direction, ce qui mettait le
sous-menu « Padel/Nos installations/... » à côté de son lien parent au lieu
d'en dessous dans le tiroir mobile — d'où la grande bande blanche à droite
signalée par Fanny en vue téléphone. Toujours écrire ces correctifs dans un
@media (min-width) quand ils ne concernent que la barre horizontale.
----------------------------------------------------------------------------
« Accueil » se tenait plus haut que les six autres mots du menu : le
séparateur en barre verticale (c-nav--sep-bars) est un ::before en ligne posé
sur le
, sauf sur le premier. Sans lui, le
d'Accueil n'a que le
texte comme contenu ; avec lui, la hauteur de ligne du
change très
légèrement, et le centrage vertical du menu (align-items:center) ne centre
plus tous les liens à la même hauteur. On neutralise l'écart en centrant
chaque
lui-même, plutôt que de compter sur le centrage global du menu.
Avec sept entrées (réduites à quatre depuis), le menu pouvait manquer de
place avant le tiroir mobile (bascule unique à 1024 px) : le logo et le
bouton Réserver restent fixes, et c'est le menu, entre les deux, qui absorbe
le manque de place en repliant ses propres liens sur une deuxième ligne.
⚠️ `margin-left: auto` sur `.c-nav__actions` est ce qui le maintient collé à
droite : sans lui, le `justify-content: space-between` du kit répartit
l'espace entre les TROIS éléments (logo, menu, bouton) et le bouton se
retrouve tiré vers le centre dès que le menu grandit. */
@media (min-width: 1024px) {
.c-nav__menu > li { display: flex; align-items: center; }
.c-nav__inner { flex-wrap: nowrap; }
.c-nav__logo { flex-shrink: 0; }
.c-nav__actions { flex-shrink: 0; margin-left: auto; }
.c-nav__menu { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; min-width: 0; row-gap: var(--s2); margin-inline: var(--s4); }
}
/* =============================================================================
ALIGNEMENT CENTRÉ — demandé par la collaboratrice sur les blocs de texte
autonomes (histoire, atouts, entreprises, cartes). Les listes à coches
gardent leurs puces alignées à gauche à l'intérieur — seul le bloc se
centre — sinon une checklist centrée se lit mal (repère du même motif déjà
utilisé par le kit en mobile : cf. .c-checklist en dessous de 1024 px).
============================================================================= */
.c-floatside > div:first-child,
.c-content--split > div:first-child,
.c-iconcards__item,
.c-featdark__item,
.c-card--article .c-card__body,
.c-card--feature {
text-align: center;
}
.c-floatside > div:first-child .c-hero__actions,
.c-content--split > div:first-child .c-hero__actions,
.c-card--article .c-card__body .c-hero__actions {
justify-content: center;
}
.c-floatside > div:first-child .c-taglist,
.c-content--split > div:first-child .c-taglist {
justify-content: center;
}
.c-floatside > div:first-child .c-checkround,
.c-content--split > div:first-child .c-checkround,
.c-card--article .c-card__body .c-checklist {
width: fit-content;
margin-inline: auto;
}
/* Icônes de carte (c-card--feature, c-card--article) : centrées au-dessus du
texte plutôt qu'à gauche, pour suivre le même axe que le titre. */
.c-card--feature .c-card__icon { margin-inline: auto; }
/* Retour du 2026-09-01 : deux décalages repérés dans l'audit « tout centrer ».
1) Le héros minimal (mentions légales, confidentialité, 404) n'était pas
centré comme tous les autres héros du site.
2) La légende sous le tableau de tarifs n'avait aucun style et restait
alignée à gauche sous une section par ailleurs centrée. */
.c-hero--minimal .c-hero__inner { text-align: center; justify-items: center; margin-inline: auto; }
.c-pricelegend { text-align: center; color: var(--text-muted); font-size: var(--fs-300); margin-top: var(--s6); }
/* Bloc « Tout pour se retrouver » (accueil) : passé à 5 cartes début 2026-08.
Le kit affiche les c-iconcards sur 4 colonnes en desktop — avec 5 cartes,
la 5e se retrouvait seule sur sa ligne. Repassé à 3 colonnes (3 + 2), pour
ne jamais avoir une ligne d'une seule carte (retour du 2026-09-01). */
@media (min-width: 1024px) {
.c-iconcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Bouton « outline » dans un héros à photo (pages Sport, Entreprises, Vos
évènements) : texte et contour en blanc pour ressortir sur la photo, comme
pour le bouton clair du bloc CTA (même logique que .c-cta .c-btn--outline
déjà dans le kit). Le bouton plein garde son style habituel. */
.c-hero--image .c-btn--outline { --_bd: hsl(0 0% 100% / 0.7); --_fg: #fff; }
.c-hero--image .c-btn--outline:hover { --_bd: #fff; }
/* =============================================================================
BLOC « PRÊT À REBONDIR ? » — bouton illisible et backlink Gestion Sports
⚠️ Le dégradé posé plus haut sur .c-btn--primary s'appliquait AUSSI au
bouton de ce bloc, où le kit prévoit un bouton BLANC à texte accent : le
dégradé peignait par-dessus, et le texte devenait illisible. On repasse ce
bouton en beige — la couleur du fond de PAGE, pas celle du bloc — avec un
texte terracotta, comme demandé.
============================================================================= */
.c-cta .c-btn--primary { background-image: none; --_bg: var(--bg); --_fg: var(--brand-fonce); }
/* =============================================================================
BLOC « PRÊT À REBONDIR ? » — variante avec capture de l'application
Le catalogue n'a pas de module qui mélange CTA et téléchargement d'app dans
un seul bloc : variante BEM propre à ce client, sur le même modèle que les
modules APP-01/02 du kit (texte à gauche, téléphone à droite).
============================================================================= */
/* Titres et sous-titres restent centrés dans leur bloc à tous les gabarits
(demande explicite de la collaboratrice) : seule la mise en colonnes change
avec le responsive, jamais l'alignement du texte. */
.c-cta--app {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
text-align: center;
justify-items: center;
}
.c-cta--app .c-cta__content { display: grid; gap: var(--s4); justify-items: center; }
.c-cta--app .c-hero__actions { justify-content: center; }
.c-cta__applabel { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-500); color: var(--accent-contraste); margin-top: var(--s2); }
.c-cta--app .c-appdl__store { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.c-cta__appshot { justify-self: center; }
/* 2026-08-31 : téléphone agrandi, qui déborde volontairement du cadre coloré
(comme s'il en sortait) — la section qui porte ce bloc gagne du padding en
plus (règle `:has()` plus bas) pour que le débordement reste dans sa propre
section, sans toucher les blocs voisins. */
.c-cta__appshot img { max-width: 340px; width: 100%; margin-block: -3.5rem; filter: drop-shadow(0 30px 60px hsl(18 45% 5% / 0.45)); }
/* Flottement doux, repris du mécanisme ANIM du kit (@keyframes c-anim-flotte,
défini une fois dans style.css) plutôt qu'une animation inventée en double. */
@media (prefers-reduced-motion: no-preference) {
.c-cta__appshot img { animation: c-anim-flotte 5s ease-in-out infinite; }
}
@media (max-width: 1023.98px) {
.c-cta--app { grid-template-columns: 1fr; }
.c-cta__appshot { order: -1; max-width: 260px; margin-inline: auto; }
.c-cta__appshot img { max-width: 260px; margin-block: -2.25rem; }
}
/* La section qui porte le bloc CTA app gagne du padding vertical en plus,
pour que le téléphone qui déborde du cadre reste dans sa propre section. */
.o-section:has(.c-cta--app) { padding-block: calc(var(--space-section) + 3.5rem); }
@media (max-width: 1023.98px) {
.o-section:has(.c-cta--app) { padding-block: calc(var(--space-section) + 2.25rem); }
}
.c-cta__credit { margin-top: var(--s2); font-size: var(--fs-300); color: hsl(0 0% 100% / 0.75); }
.c-cta__credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* =============================================================================
PICTOS DE DISCIPLINE — fournis par le club, en aplat terracotta
⚠️ Le survol du kit fait passer le disque en fond plein accent et l'icône en
blanc — pensé pour un