/* ========================================================================== MonClub.online — Page d'accueil, direction « Produit démontré » (2026) Même structure qu'à l'origine, palette et typographie Roland-Garros : Oswald pour les titres, Barlow pour le texte, fond crème, cartes blanches bordées, terre battue en accent, vert pour les états et les créneaux. Les noms de jetons « bleu » sont conservés pour ne pas réécrire toute la feuille : ils portent désormais la terre battue. Portée : uniquement , pour ne pas toucher aux autres pages. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap'); body.acc { --b-fond: #F4F3F0; --b-surface: #FFFFFF; --b-surface-2: #FAF9F6; --b-ligne: #E4E1DA; --b-ligne-f: #D3CEC3; --b-encre: #1A1A1A; --b-texte: #3A3A3A; --b-doux: #4F4F4D; --b-faible: #6C6C67; /* 4,8:1 sur le creme */ --b-bleu: #CC4E0E; /* terre battue : aplats, boutons, bordures */ --b-bleu-f: #A83E0A; /* terre foncée : tout texte coloré (5,9:1) */ --b-tint: #E9F0EB; /* vert très pâle : pastilles, créneaux */ --b-vert: #0F7A52; /* vert de succès : présent, validé */ --b-vert-f: #00503C; /* vert profond : bordures de créneaux, montants */ --b-vert-t: #E7F1EA; --b-or: #CC4E0E; /* le match du samedi : terre battue */ --b-or-t: #FBEEE5; --b-titre: 'Oswald', 'Barlow', 'Helvetica Neue', sans-serif; --b-police: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--b-fond); font-family: var(--b-police); font-size: 16px; color: var(--b-encre); -webkit-font-smoothing: antialiased; } body.acc .conteneur { max-width: 1240px; } body.acc h1, body.acc h2, body.acc h3, body.acc h4 { font-family: var(--b-titre); font-weight: 600; letter-spacing: 0; color: var(--b-encre); margin: 0; } body.acc a { color: var(--b-bleu-f); } body.acc a:hover { color: var(--b-bleu-f); } /* ---------- En-tête et pied, repeints pour cette page ---------- */ body.acc .entete { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--b-ligne); } body.acc .entete.pose { box-shadow: 0 1px 3px rgba(15,20,23,.05); border-bottom-color: var(--b-ligne); } body.acc .entete .conteneur { height: 68px; } body.acc .nav-p a { font-family: var(--b-police); font-size: 14px; font-weight: 500; color: var(--b-doux); border-radius: 6px; padding: 8px 12px; } body.acc .nav-p a:hover, body.acc .nav-p a.actif { color: var(--b-bleu-f); background: var(--b-tint); } body.acc .burger { border-radius: 8px; border-color: var(--b-ligne-f); color: var(--b-bleu); } body.acc .entete .btn { border-radius: 6px; font-family: var(--b-police); font-weight: 600; font-size: 14px; padding: 10px 18px; } body.acc .entete .btn:hover { transform: none; } body.acc .entete .btn-ligne { border: 1px solid var(--b-ligne-f); background: #fff; color: var(--b-doux) !important; } body.acc .entete .btn-ligne:hover { border-color: var(--b-bleu); color: var(--b-bleu) !important; box-shadow: none; } body.acc .entete .btn-vert { background: var(--b-bleu); box-shadow: none; color: #fff !important; } body.acc .entete .btn-vert:hover { background: var(--b-bleu-f); box-shadow: none; } body.acc .pied { background: #fff; border-top: 1px solid var(--b-ligne); color: var(--b-doux); padding-top: 52px; } body.acc .pied h4 { color: var(--b-encre); font-family: var(--b-titre); font-size: 12px; letter-spacing: .08em; } body.acc .pied p, body.acc .pied li { color: var(--b-doux); font-size: 13.5px; } body.acc .pied a { color: var(--b-doux); } body.acc .pied a:hover { color: var(--b-bleu-f); } body.acc .pied-logo img { background: transparent; padding: 0; height: 46px; } body.acc .pied-contact i { color: var(--b-bleu); } body.acc .pied-bas { border-top-color: var(--b-ligne); color: var(--b-faible); } body.acc .pied-bas a { color: var(--b-faible); } body.acc .haut { background: var(--b-encre); color: #fff; box-shadow: 0 6px 18px rgba(15,20,23,.18); } /* ---------- Trames communes ---------- */ body.acc section { padding: 72px 0; } body.acc .b-suite { padding-top: 0; } .b-kick { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-bleu); } .b-tete { max-width: 660px; margin-bottom: 28px; } .b-tete h2 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.18; margin-top: 12px; } .b-tete p { margin-top: 12px; } .b-corps { font-size: 16px; line-height: 1.68; color: var(--b-doux); } .b-carte { background: var(--b-surface); border: 1px solid var(--b-ligne); border-radius: 8px; } .b-lien { font-size: 14.5px; font-weight: 600; color: var(--b-bleu-f); } .b-lien:hover { color: var(--b-bleu-f); } .b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 26px; border-radius: 6px; font-family: var(--b-police); font-size: 15px; font-weight: 600; border: 0; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .b-btn-p { background: var(--b-bleu); color: #fff !important; } .b-btn-p:hover { background: var(--b-bleu-f); color: #fff !important; } .b-btn-s { background: #fff; border: 1px solid var(--b-ligne-f); color: var(--b-encre) !important; } .b-btn-s:hover { border-color: var(--b-bleu); color: var(--b-bleu) !important; } .b-btn-b { background: #fff; color: var(--b-encre) !important; } .b-btn-b:hover { background: #EAE7E1; color: var(--b-encre) !important; } .b-ic { width: 34px; height: 34px; border-radius: 7px; background: var(--b-tint); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--b-bleu); font-size: 15px; } /* ---------- Héros ---------- */ .b-heros { padding-top: 116px !important; } .b-heros-grille { display: grid; grid-template-columns: minmax(0,540px) 1fr; gap: 56px; align-items: start; } .b-heros h1 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; text-wrap: balance; margin: 20px 0 0; } .b-heros .b-corps { font-size: 17.5px; margin-top: 20px; } .b-heros-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .b-puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .b-puces span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--b-ligne); background: #fff; border-radius: 999px; font-size: 12.5px; color: var(--b-doux); } .b-puces i.pt { width: 6px; height: 6px; border-radius: 50%; background: var(--b-vert); display: inline-block; } /* ---------- Panneau produit dessiné ---------- */ .b-panneau { overflow: hidden; box-shadow: 0 12px 32px rgba(15,20,23,.07); } .b-panneau-barre { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--b-ligne); background: var(--b-surface-2); } .b-pts { display: flex; gap: 5px; } .b-pts i { width: 9px; height: 9px; border-radius: 50%; background: #DCD8D0; display: block; } .b-panneau-barre span { font-size: 12px; color: var(--b-faible); } .b-panneau-corps { display: grid; grid-template-columns: 172px 1fr; } .b-menu { background: var(--b-encre); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; } .b-menu b { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #7E8C80; padding: 0 10px 8px; } body.acc .b-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 5px; color: #9BA79D; font-size: 13px; cursor: default; } body.acc .b-menu a i { width: 15px; text-align: center; font-size: 13px; } body.acc .b-menu a.on { background: #16281F; color: #fff; font-weight: 500; } body.acc .b-menu a.on i { color: #D2E32D; } .b-vue { padding: 18px 20px; } .b-vue-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .b-vue-tete b { font-family: var(--b-titre); font-size: 15px; font-weight: 600; } .b-vue-tete span { font-size: 12px; color: var(--b-faible); } .b-semaine { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; } .b-jour { display: flex; flex-direction: column; gap: 7px; } .b-jour > b { font-size: 10.5px; font-weight: 600; color: var(--b-faible); } .b-jour > b.fort { color: var(--b-encre); } .b-creno { background: var(--b-tint); border-left: 2px solid var(--b-vert-f); border-radius: 4px; padding: 8px 9px; } .b-creno b { display: block; font-size: 11.5px; font-weight: 600; } .b-creno span { font-size: 11px; color: var(--b-doux); } .b-creno.match { background: var(--b-or-t); border-left-color: var(--b-or); } .b-creno.match span { color: var(--b-bleu-f); } .b-notif { margin-top: 16px; border: 1px solid var(--b-ligne); border-radius: 6px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .b-notif .rond { width: 30px; height: 30px; border-radius: 50%; background: var(--b-vert-t); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--b-vert); font-size: 13px; } .b-notif .txt { flex: 1; } .b-notif .txt b { display: block; font-size: 12.5px; font-weight: 600; } .b-notif .txt span { font-size: 11.5px; color: var(--b-faible); } .b-notif .h { font-size: 11px; color: var(--b-faible); } /* ---------- Repères chiffrés ---------- */ .b-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding: 26px 0; } .b-chiffres > div { padding: 0 30px; border-right: 1px solid var(--b-ligne); } .b-chiffres > div:last-child { border-right: 0; } .b-chiffres b { display: block; font-family: var(--b-titre); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .b-chiffres b .suf { color: var(--b-bleu-f); } .b-chiffres > div > span { display: block; font-size: 13.5px; color: var(--b-faible); margin-top: 4px; } /* ---------- Deux publics ---------- */ .b-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .b-duo > div { padding: 34px 36px; display: flex; flex-direction: column; gap: 16px; } .b-duo h2 { font-size: 26px; line-height: 1.2; } .b-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .b-liste span { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--b-texte); } .b-liste i { color: var(--b-vert); font-size: 13px; margin-top: 4px; flex-shrink: 0; } /* ---------- Modules ---------- */ .b-mods { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .b-mods > div { padding: 24px; display: flex; gap: 14px; align-items: flex-start; } .b-mods h3 { font-size: 15.5px; } .b-mods p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: #5F5F5B; } .b-mods-pied { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .b-mods-pied span { font-size: 14px; color: var(--b-faible); } /* ---------- Aperçu : rangées photo ---------- */ .b-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; align-items: stretch; } .b-rang + .b-rang { margin-top: 20px; } .b-rang-txt { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .b-rang-txt h3 { font-size: 22px; line-height: 1.22; } .b-rang-img { position: relative; min-height: 300px; background: var(--b-tint); } .b-rang-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .b-rang.inv .b-rang-txt { order: 2; } .b-rang-tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: rgba(255,255,255,.96); border: 1px solid var(--b-ligne); border-radius: 6px; padding: 9px 12px; max-width: calc(100% - 36px); } .b-rang-tag b { display: block; font-size: 12.5px; font-weight: 600; } .b-rang-tag span { font-size: 11.5px; color: var(--b-faible); } /* ---------- Preuve : dossier de subvention ---------- */ .b-preuve { display: grid; grid-template-columns: 1fr 420px; gap: 56px; padding: 44px 48px; align-items: center; } .b-preuve h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; margin-top: 12px; } .b-doss { border: 1px solid var(--b-ligne); border-radius: 8px; overflow: hidden; } .b-doss-tete { padding: 14px 18px; background: var(--b-surface-2); border-bottom: 1px solid var(--b-ligne); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .b-doss-tete b { font-family: var(--b-titre); font-size: 13.5px; font-weight: 600; } .b-etat { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--b-vert-t); color: var(--b-vert-f); white-space: nowrap; } .b-doss-corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; } .b-doss-corps .l { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; } .b-doss-corps .l span:first-child { color: #5F5F5B; } .b-doss-corps .l span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; } .b-doss-corps hr { border: 0; border-top: 1px solid var(--b-ligne); margin: 0; } .b-doss-corps .l.fort { font-size: 14px; } .b-doss-corps .l.fort span:last-child { font-weight: 700; color: var(--b-vert-f); } .b-doss-corps p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--b-faible); } /* ---------- Mobile ---------- */ .b-mobile { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .b-mobile-txt { padding: 44px 48px; } .b-mobile-txt h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; margin-top: 12px; } .b-stores { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .b-stores img { height: 44px; border-radius: 8px; display: block; } .b-tel-fond { background: #EDEFEA; padding: 40px; display: flex; align-items: center; justify-content: center; } .b-tel { width: 240px; border: 1px solid #D5DDE1; border-radius: 22px; background: #fff; padding: 14px; box-shadow: 0 10px 26px rgba(15,20,23,.08); } .b-tel > b { display: block; font-family: var(--b-titre); font-size: 13.5px; font-weight: 600; margin-bottom: 12px; } .b-tel-c { border: 1px solid var(--b-ligne); border-radius: 8px; padding: 12px; margin-bottom: 10px; } .b-tel-c b { display: block; font-size: 12.5px; font-weight: 600; } .b-tel-c i { display: block; font-style: normal; font-size: 11.5px; color: var(--b-faible); margin-bottom: 10px; } .b-tel-rep { display: flex; gap: 8px; } .b-tel-rep span { flex: 1; text-align: center; padding: 9px 0; border-radius: 6px; font-size: 12px; font-weight: 600; } .b-tel-rep .oui { background: var(--b-vert); color: #fff; } .b-tel-rep .non { border: 1px solid var(--b-ligne); color: #5F5F5B; } .b-tel-c.pale { opacity: .6; margin-bottom: 0; } .b-tel-c.pale i { margin-bottom: 0; } /* ---------- Parcours de démarrage ---------- */ .b-voies { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .b-voies > div { padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; } .b-voies h3 { font-size: 20px; } .b-etapes { counter-reset: e; display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; } .b-etapes li { counter-increment: e; display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--b-doux); } .b-etapes li::before { content: counter(e); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--b-tint); color: var(--b-bleu); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .b-etapes li b { color: var(--b-encre); font-weight: 600; } .b-note { font-size: 13px; color: var(--b-faible); margin: 0; } /* ---------- Tarifs ---------- Modèle du 26/09/2026 : la carte des clubs est la carte principale, sur toute la largeur (le texte à gauche, la grille par saison à droite) ; dessous, adhérents et familles, puis la commune, plus discrète. */ .b-tarifs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .b-tarifs > div { padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; } .b-tarifs h3 { font-size: 17px; } .b-prix { font-family: var(--b-titre); font-size: 28px; font-weight: 700; letter-spacing: 0; } .b-prix.gratuit { color: var(--b-vert-f); } .b-tarifs ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .b-tarifs li { position: relative; padding-left: 18px; font-size: 14px; color: var(--b-doux); } .b-tarifs li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--b-ligne-f); } .b-tarifs > .b-tarif-club { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 48px; align-items: start; border-color: var(--b-bleu); box-shadow: 0 10px 28px rgba(26,22,18,.06); padding: 32px 36px; } .b-tarif-txt { display: flex; flex-direction: column; gap: 14px; } .b-tarif-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; } .b-tarif-tete h3 { font-size: 20px; } .b-tarif-tete .b-note { margin-top: 4px; } .b-tarif-club .b-prix { line-height: 1.1; } .b-prix-av { display: block; font-family: var(--b-police); font-size: 13px; font-weight: 600; color: var(--b-faible); } .b-prix-per { font-family: var(--b-police); font-size: 15px; font-weight: 500; color: var(--b-doux); } .b-essai { align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 0; background: var(--b-vert-t); color: var(--b-vert-f); border-radius: 16px; padding: 7px 14px; font-size: 14px; font-weight: 600; } .b-grille { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } .b-grille caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .b-grille th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--b-faible); padding: 0 0 8px; border-bottom: 1px solid var(--b-ligne-f); } .b-grille td { padding: 8px 0; border-bottom: 1px solid var(--b-ligne); color: var(--b-doux); } .b-grille th:last-child, .b-grille td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; } .b-grille td:last-child { font-weight: 600; color: var(--b-encre); } .b-grille tr:last-child td { border-bottom: 0; } .b-tarif-actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 6px; } .b-tarif-actions span { font-size: 13.5px; color: var(--b-faible); } .b-tarifs > .b-tarif-ville { background: var(--b-surface-2); padding: 22px 26px; gap: 8px; } .b-tarif-ville h3 { font-size: 15.5px; } .b-tarif-ville b { color: var(--b-encre); font-weight: 600; white-space: nowrap; } /* ---------- Le jeudi soir ---------- */ .b-jeudi { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .b-jeudi-txt { padding: 44px 48px; display: flex; flex-direction: column; gap: 14px; justify-content: center; } .b-jeudi-txt h2 { font-size: clamp(23px, 2.3vw, 28px); line-height: 1.2; } .b-jeudi-img { background: var(--b-tint); display: flex; align-items: center; justify-content: center; padding: 28px; } .b-jeudi-img img { max-width: 100%; height: auto; } /* ---------- Avis et partenaires ---------- */ .b-avis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .b-avis > div { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; } .b-etoiles { color: #A85B00; font-size: 13px; letter-spacing: 2px; } .b-avis p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--b-texte); } .b-qui { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; } .b-qui img { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--b-ligne); } .b-qui b { display: block; font-size: 13.5px; } .b-qui span { font-size: 12.5px; color: var(--b-faible); } .b-avis .sombre { background: var(--b-encre); border-color: var(--b-encre); } .b-avis .sombre p { color: #A9A8A2; } body.acc .b-avis .sombre h3 { color: #fff; font-size: 17px; } .b-partenaires { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; padding: 22px 26px; } .b-partenaires .lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-faible); } .b-partenaires img { height: 34px; width: auto; opacity: .75; } .b-partenaires a:hover img { opacity: 1; } /* ---------- FAQ ---------- */ .b-faq { max-width: 860px; } .b-faq details { border-bottom: 1px solid var(--b-ligne); } .b-faq details:first-child { border-top: 1px solid var(--b-ligne); } .b-faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-family: var(--b-titre); font-size: 16px; font-weight: 600; color: var(--b-encre); } .b-faq summary::-webkit-details-marker { display: none; } .b-faq summary::after { content: '\f078'; font-family: FontAwesome; position: absolute; right: 8px; top: 19px; font-size: 12px; color: var(--b-faible); transition: transform .2s ease; } .b-faq details[open] summary::after { transform: rotate(180deg); } .b-faq p { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--b-doux); max-width: 72ch; } /* ---------- Appel final ---------- */ .b-cta { background: var(--b-encre); border-radius: 10px; padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 48px; } body.acc .b-cta h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.16; color: #fff; max-width: 640px; } .b-cta p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: #A9A8A2; max-width: 640px; } .b-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .b-cta-actions span { text-align: center; font-size: 13.5px; color: #A9A8A2; } .b-cta-actions a { white-space: nowrap; } /* ---------- Adaptations ---------- */ @media (max-width: 1080px) { .b-heros-grille { grid-template-columns: 1fr; gap: 40px; } .b-preuve { grid-template-columns: 1fr; gap: 32px; padding: 34px 32px; } .b-mods { grid-template-columns: repeat(2, minmax(0,1fr)); } .b-avis { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { body.acc section { padding: 56px 0; } .b-chiffres { grid-template-columns: 1fr 1fr; gap: 22px 0; } .b-chiffres > div:nth-child(2) { border-right: 0; } .b-duo, .b-voies, .b-tarifs, .b-avis, .b-mobile, .b-jeudi { grid-template-columns: 1fr; } /* une seule colonne : la grille des prix remonte juste sous l'essai */ .b-tarifs > .b-tarif-club { grid-template-columns: 1fr; gap: 14px; padding: 28px 30px; } .b-tarif-txt { display: contents; } .b-tarif-club .b-grille { order: 1; margin: 4px 0; } .b-tarif-club ul { order: 2; } .b-tarif-club .b-tarif-txt > .b-note { order: 3; } .b-tarif-actions { order: 4; } .b-rang { grid-template-columns: 1fr; } .b-rang.inv .b-rang-txt { order: 0; } .b-rang-img { min-height: 240px; } .b-cta { flex-direction: column; align-items: flex-start; padding: 36px 32px; gap: 28px; } .b-cta-actions { width: 100%; } .b-mobile-txt, .b-jeudi-txt, .b-rang-txt { padding: 32px 28px; } .b-panneau-corps { grid-template-columns: 1fr; } .b-menu { flex-direction: row; overflow-x: auto; gap: 6px; padding: 12px; } .b-menu b { display: none; } .b-menu a { white-space: nowrap; } } @media (max-width: 560px) { body.acc { font-size: 15.5px; } .b-heros { padding-top: 100px !important; } .b-mods { grid-template-columns: 1fr; } .b-btn { width: 100%; height: 52px; } .b-heros-actions { gap: 10px; } .b-semaine { grid-template-columns: repeat(3, minmax(0,1fr)); } .b-duo > div, .b-voies > div, .b-tarifs > div, .b-avis > div { padding: 26px 22px; } .b-tarifs > .b-tarif-club, .b-tarifs > .b-tarif-ville { padding: 26px 20px; } .b-tarif-tete { align-items: flex-start; } .b-grille { font-size: 14px; } .b-chiffres { grid-template-columns: 1fr; } .b-chiffres > div { border-right: 0; padding: 0 22px; } }