/* Gym L'Atelier : ce que toutes les pages partagent (couleurs, polices, boutons, en-tête, menu, pied). */
@font-face { font-family: "Archivo"; src: url(photos/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Feutre"; src: url(photos/marker.woff2) format("woff2"); font-display: swap; }
:root {
  --mur: #131313; --mur-2: #1d1d1d; --papier: #f3f2ee; --tableau: #fbfbf9; --encre: #141414; --gris: #6b6a66; --gris-c: #b9b7b1;
  --vert: #3fae29; --vert-f: #2f9020; --vert-texte: #2b7a1a; --vert-vif: #8fe36f; --rouge: #d3261c; --bois: #d2b47a; --del: #ff3b24;
  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif; --feutre: "Feutre", "Marker Felt", "Comic Sans MS", cursive;
  --tete: 60px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--tete); }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.5 var(--titre); font-stretch: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
h2 { font-size: clamp(34px, 5vw, 64px); line-height: .98; }
.large { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 3px; border: 2px solid var(--vert);
  background: var(--vert); color: #0e1a0b; font: 700 16px/1 var(--titre); font-stretch: 108%; text-decoration: none; cursor: pointer; transition: transform .12s, background .2s;
  -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--vert-f); border-color: var(--vert-f); }
.btn:active { transform: scale(.95); }
.btn.ligne { background: transparent; color: inherit; border-color: currentColor; }
.btn.ligne:hover { background: rgba(127,127,127,.12); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lien { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/* En-tête */
.tete { position: sticky; top: 0; z-index: 30; background: var(--tableau); border-bottom: 3px solid var(--vert); }
.tete-in { display: flex; align-items: center; gap: 16px; height: var(--tete); }
.logo img { height: 48px; width: auto; mix-blend-mode: multiply; }
.nom-gym { display: flex; flex-direction: column; line-height: 1.1; font-size: 15px; font-weight: 800; font-stretch: 100%; white-space: nowrap; margin-left: -6px; color: var(--encre); text-decoration: none; }
.nom-gym small { font-size: 11px; font-weight: 700; color: var(--vert-texte); letter-spacing: .04em; }
.tete .btn { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
img { height: auto; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }

/* Le menu : trois traits en haut à droite, toutes les pages du site */
.burger { flex: none; width: 44px; height: 44px; margin-right: -8px; display: grid; place-content: center; gap: 5px; border: 0; background: none; cursor: pointer; color: var(--encre);
  -webkit-tap-highlight-color: transparent; }
.burger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s cubic-bezier(.23,1,.32,1), opacity .15s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu { position: fixed; z-index: 29; left: 0; right: 0; top: var(--tete); bottom: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--mur); color: #f4f3ef; opacity: 0; transform: translateY(-10px); transition: opacity .15s ease-in, transform .15s ease-in; }
.menu.ouvert { opacity: 1; transform: none; transition: opacity .22s cubic-bezier(.23,1,.32,1), transform .22s cubic-bezier(.23,1,.32,1); }
.menu .large { display: grid; gap: 28px; padding-top: 18px; padding-bottom: 28px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px solid #2a2a2a; }
.menu ul a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none;
  font: 800 26px/1.1 var(--titre); font-stretch: 110%; color: #f4f3ef; }
.menu ul a small { font: 500 14px var(--titre); color: #8d8b85; white-space: nowrap; }
.menu ul a:hover, .menu ul a[aria-current="page"] { color: var(--vert-vif); }
.menu .infos-menu { display: grid; gap: 14px; align-content: start; color: #cfcdc7; font-size: 16px; }
@media (max-width: 599px) { .menu ul a small { display: none; } }
body.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu, .menu.ouvert { transform: none; } }

/* Le début d'une page : son titre sur le mur de la salle */
.ouverture { position: relative; background: var(--mur); color: #f4f3ef; overflow: hidden; }
.ouverture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.ouverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,19,19,.2), rgba(19,19,19,.85)); }
.ouverture .large { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 40px; display: grid; gap: 14px; }
.ouverture h1 { font-size: clamp(40px, 8vw, 96px); line-height: .95; }
.ouverture p { font-size: clamp(17px, 1.6vw, 21px); color: #dedcd6; max-width: 46em; }
.ouverture .feutre { font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--feutre); color: var(--vert-vif); }

/* Le pied de page : où, quand, toutes les pages */
.pied { background: var(--mur); color: #f4f3ef; }
.pied .large { padding-top: 56px; padding-bottom: 48px; display: grid; gap: 30px; }
.pied .grand { font-size: clamp(30px, 4.4vw, 54px); }
.infos { display: grid; gap: 22px; font-size: 16px; }
.infos h3 { font-size: 15px; font-stretch: 100%; color: var(--gris-c); font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.infos address { font-style: normal; }
.infos ul { list-style: none; margin: 0; padding: 0; }
.infos .liens { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bande { background: #0b0b0b; color: #8b8984; font-size: 13px; text-align: center; padding: 12px 16px; }

/* Au téléphone, l'en-tête tient sur 360 px : le bouton d'achat se resserre. */
@media (max-width: 420px) {
  .tete-in { gap: 10px; }
  .logo img { height: 42px; }
  .nom-gym { font-size: 14px; }
  .nom-gym small { font-size: 10px; }
  .tete .btn { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 349px) { .nom-gym { display: none; } }

@media (min-width: 900px) {
  :root { --tete: 68px; }
  .large { padding: 0 40px; }
  .infos { grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 22px 56px; }
  .menu { left: auto; width: min(520px, 100%); bottom: auto; max-height: calc(100dvh - var(--tete)); box-shadow: -20px 30px 60px rgba(0,0,0,.35); }
  .menu .large { padding: 26px 40px 34px; }
  .menu ul a { font-size: 30px; }
  .ouverture .large { padding-top: 120px; padding-bottom: 56px; }
}