/* Gym L'Atelier : les pages autres que l'accueil. Au téléphone d'abord : marges serrées, aucun trou. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.petit { color: var(--gris); font-size: 14px; }
.question { color: var(--gris); }

/* Horaire : la police des titres, rien au feutre */
.semaine { background: var(--tableau); padding: 0 0 26px; }
.choix-jour { position: sticky; top: var(--tete); z-index: 5; display: flex; background: var(--tableau); border-bottom: 1px solid #e3e1db; padding: 0 10px; }
.choix-jour button { flex: 1; min-width: 0; height: 52px; border: 0; background: none; cursor: pointer; font: 800 18px/1 var(--titre); font-stretch: 108%; color: var(--gris-c);
  box-shadow: inset 0 -3px transparent; transition: color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.choix-jour button[aria-pressed="true"] { color: var(--encre); box-shadow: inset 0 -3px var(--vert); }
.jour-liste { list-style: none; margin: 0; padding: 0; }
.jour-liste li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #e9e7e1; }
.jour-liste .h { font-weight: 800; font-stretch: 112%; font-size: 21px; font-variant-numeric: tabular-nums; }
.jour-liste .c { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.jour-liste li.prochain .h { color: var(--vert-texte); }
.jour-liste li.prochain .c::after { content: "Prochain"; font-size: 14px; font-weight: 700; color: var(--vert-texte); }
.cours { font-size: 18px; font-weight: 500; }
.cours.special { font-weight: 700; color: var(--vert-texte); }
.cours small { display: block; color: var(--gris); font-size: 14px; font-weight: 500; }
.planche { display: none; }
.source { margin-top: 16px; font-size: 15px; }

/* Les cours */
.liste-cours { background: var(--papier); padding: 0 0 24px; }
.un-cours { display: grid; gap: 12px; padding: 22px 0; border-bottom: 1px solid #dedcd5; }
.un-cours > img, .heure-feutre { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.heure-feutre { display: grid; place-items: center; background: var(--mur); color: var(--bois); font: 800 clamp(56px, 14vw, 110px)/1 var(--titre); font-stretch: 112%; }
.un-cours > div { display: grid; gap: 8px; align-content: start; justify-items: start; }
.un-cours h2 { font-size: clamp(30px, 4vw, 48px); }
.un-cours .quand { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--encre); }
.un-cours .quand b { color: var(--vert-texte); font-weight: 800; }
.un-cours .btn { margin-top: 4px; }

/* Les prix : trois onglets, un gros chiffre par ligne, la ligne entière se touche */
.tarifs { background: var(--papier); padding: 0 0 26px; }
.tarifs .large { display: grid; gap: 18px; }
.depart-bande { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 -18px; padding: 18px; background: var(--vert); color: #0e1a0b; text-decoration: none;
  transition: background .2s; -webkit-tap-highlight-color: transparent; }
.depart-bande:hover { background: var(--vert-f); }
.depart-bande:active { transform: scale(.98); }
.depart-bande .grosse { font-size: clamp(44px, 9vw, 76px); font-weight: 800; font-stretch: 112%; line-height: 1; }
.depart-bande .nom { font-size: 20px; font-weight: 800; font-stretch: 108%; line-height: 1.1; }
.fleche { font-size: 26px; font-weight: 700; }
.onglets { display: flex; border-bottom: 2px solid var(--encre); margin-top: 8px; }
.onglets button { flex: 1; height: 50px; border: 0; background: none; cursor: pointer; font: 800 17px/1 var(--titre); font-stretch: 108%; color: var(--gris);
  box-shadow: inset 0 -4px transparent; transition: color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.onglets button[aria-selected="true"] { color: var(--encre); box-shadow: inset 0 -4px var(--vert); }
.lignes-prix { list-style: none; margin: -18px 0 0; padding: 0; }
.lignes-prix a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #dedcd5; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background .15s; }
.lignes-prix a:hover { background: rgba(63,174,41,.07); }
.lignes-prix a:active { transform: scale(.99); }
.montant { font-size: clamp(30px, 6vw, 44px); font-weight: 800; font-stretch: 112%; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 4.4em; }
.petit-montant { color: var(--vert-texte); }
.lignes-prix .nom { font-size: 19px; font-weight: 700; line-height: 1.15; }
.lignes-prix .nom small { display: block; font-size: 14px; font-weight: 500; color: var(--gris); margin-top: 2px; }
.lignes-prix .fleche { color: var(--vert-texte); }

/* Débuter */
.fourche { background: var(--papier); }
.fourche .large { display: grid; padding-top: 0; padding-bottom: 0; }
.voie { display: grid; gap: 10px; justify-items: start; padding: 22px 0; }
.voie h2 { font-size: clamp(28px, 4vw, 46px); }
.voie.nouveau { border-bottom: 2px solid var(--encre); }
.voie p { color: #3a3936; }
.guide-pdf { background: var(--tableau); border-top: 1px solid #e4e2dc; }
.guide-pdf .large { padding-top: 24px; padding-bottom: 26px; display: grid; gap: 12px; }
.guide-pdf h2 { font-size: clamp(28px, 4vw, 46px); }

/* L'équipe : une grille de photos ; la personne touchée s'ouvre sur toute la rangée */
.mur-coachs { background: var(--tableau); padding: 18px 0 26px; }
.grille-coachs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.grille-coachs li { min-width: 0; scroll-margin-top: calc(var(--tete) + 12px); }
.vignette { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; }
.vignette img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; margin-bottom: 4px; transition: filter .2s; }
.vignette:hover img { filter: brightness(1.06); }
.vignette:active { transform: scale(.98); }
.grille-coachs .nom { font-size: 18px; font-weight: 800; font-stretch: 108%; line-height: 1.1; }
.grille-coachs .role { color: var(--vert-texte); font-weight: 700; font-size: 14px; }
.fiche { display: none; }
.grille-coachs li.ouvert { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 3px solid var(--vert); }
.grille-coachs li.ouvert .vignette { display: none; }
.grille-coachs li.ouvert .fiche { display: grid; gap: 14px; }
.fiche img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; }
.fiche .texte { display: grid; gap: 10px; justify-items: start; }
.fiche h2 { font-size: 28px; line-height: 1.05; color: var(--vert-texte); }
.fiche .role { margin-top: -6px; }
.fiche p:not(.role) { font-size: 17px; line-height: 1.5; }
.fermer { margin-top: 4px; border: 2px solid var(--encre); background: none; border-radius: 3px; padding: 8px 16px; font: 700 15px var(--titre); cursor: pointer; color: var(--encre); }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }

/* Zone2Go : les assiettes sur fond blanc, comme sur le menu */
.assiettes { background: #fff; }
.assiettes .large { padding-top: 26px; padding-bottom: 24px; display: grid; gap: 18px; }
.texte-z2g { display: grid; gap: 10px; justify-items: start; }
.texte-z2g h1 { font-size: clamp(40px, 7vw, 84px); line-height: .95; }
.code { font-weight: 700; }
.code span { font: 400 28px/1 var(--feutre); color: var(--rouge); margin-left: 6px; letter-spacing: .03em; }
.bols { list-style: none; margin: 0 -18px; padding: 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bols::-webkit-scrollbar { display: none; }
.bols li { scroll-snap-align: start; }
.bols img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.semaine-z2g { background: var(--papier); }
.semaine-z2g .large { padding-top: 24px; padding-bottom: 26px; display: grid; gap: 10px; }
.semaine-z2g h2 { font-size: clamp(28px, 4vw, 46px); }
.prix-z2g { border-collapse: collapse; margin-top: 10px; width: 100%; max-width: 520px; font-size: 17px; }
.prix-z2g caption { text-align: left; color: var(--gris); font-size: 14px; padding-bottom: 6px; }
.prix-z2g th, .prix-z2g td { padding: 10px 0; border-bottom: 1px solid #dedcd5; text-align: left; }
.prix-z2g thead th { border-bottom: 2px solid var(--encre); font-size: 15px; }
.prix-z2g td { font-weight: 800; font-stretch: 112%; font-size: 22px; }

/* Classique AR : leur bannière, puis quatre chiffres */
.banniere-ar { background: #fff; padding: 26px 18px 30px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.banniere-ar img { width: min(100%, 640px); }
.date-ar { font-size: 20px; font-weight: 800; font-stretch: 108%; }
.intro-ar { max-width: 34em; color: var(--gris); font-size: 17px; }
.bon-a-savoir { background: var(--tableau); border-top: 1px solid #e4e2dc; }
.bon-a-savoir .large { padding-top: 28px; padding-bottom: 30px; display: grid; gap: 14px; }
.bon-a-savoir h2 { font-size: clamp(28px, 4vw, 44px); }
.bon-a-savoir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bon-a-savoir li { display: grid; gap: 2px; font-size: 16px; color: #3a3936; }
.bon-a-savoir li b { color: var(--encre); font-size: 17px; }
.chiffres-ar { background: var(--papier); border-top: 1px solid #e4e2dc; }
.chiffres-ar .large { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-top: 30px; padding-bottom: 32px; }
.chiffres-ar div { display: grid; gap: 4px; align-content: start; }
.chiffres-ar b { font-size: clamp(40px, 7vw, 72px); font-weight: 800; font-stretch: 112%; line-height: 1; color: var(--vert-texte); }
.chiffres-ar span { font-size: 16px; color: #3a3936; }

/* Articles */
.journal { background: var(--tableau); }
.journal .large { padding-top: 24px; padding-bottom: 24px; display: grid; gap: 10px; }
.journal h1 { font-size: clamp(40px, 7vw, 84px); line-height: .95; }
.chapeau { color: var(--gris); font-size: 18px; }
.sommaire { list-style: none; margin: 12px 0 0; padding: 0; border-top: 2px solid var(--encre); }
.sommaire li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid #e3e1db; }
.sommaire time { font: 400 18px/1 var(--feutre); color: var(--vert-texte); }
.sommaire a { text-decoration: none; }
.sommaire a:hover h2 { text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sommaire h2 { font-size: clamp(23px, 3vw, 36px); line-height: 1.08; }
.sommaire p { color: #3a3936; }
.duree { color: var(--gris); font-size: 14px; }

/* Les pages, au téléphone : l'ouverture ne prend pas tout l'écran. */
@media (max-width: 899px) {
  .ouverture .large { padding-top: 36px; padding-bottom: 24px; gap: 10px; }
  .ouverture h1 { font-size: clamp(38px, 11vw, 54px); }
  .pied .large { padding-top: 28px; padding-bottom: 28px; gap: 20px; }
}

@media (min-width: 900px) {
  .semaine { padding-bottom: 56px; }
  .choix-jour, .jour-liste { display: none; }
  .planche { display: block; margin-top: 40px; }
  .planche table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .planche thead th { font-size: 18px; font-weight: 800; font-stretch: 108%; text-align: left; padding: 0 10px 12px; border-bottom: 2px solid var(--encre); }
  .planche thead th:first-child { width: 76px; padding-left: 0; }
  .planche thead th.auj { color: var(--vert-texte); }
  .planche tbody th { font-weight: 800; font-stretch: 112%; font-size: 18px; text-align: left; padding: 10px 0; vertical-align: top; font-variant-numeric: tabular-nums; border-bottom: 1px solid #e3e1db; }
  .planche td { padding: 10px; vertical-align: top; border-bottom: 1px solid #e3e1db; }
  .planche td.auj { background: rgba(63,174,41,.08); }
  .planche .cours { display: block; font-size: 15px; line-height: 1.3; }
  .planche .cours small { font-size: 12.5px; }
  .planche .cours + .cours { margin-top: 4px; }

  .liste-cours { padding-bottom: 56px; }
  .un-cours { grid-template-columns: 5fr 6fr; gap: 40px; padding: 34px 0; align-items: center; }
  .un-cours:nth-child(even) > img, .un-cours:nth-child(even) > .heure-feutre { order: 2; }
  .un-cours > img, .heure-feutre { aspect-ratio: 4 / 3; }
  .un-cours .quand { font-size: 19px; }

  .tarifs { padding-bottom: 60px; }
  .tarifs .large { max-width: 860px; gap: 24px; padding-top: 40px; }
  .depart-bande { margin: 0; padding: 22px 30px; }

  .fourche .large { grid-template-columns: 1fr 1fr; gap: 56px; }
  .voie { padding: 48px 0; }
  .voie.nouveau { border-bottom: 0; border-right: 2px solid var(--encre); padding-right: 56px; }
  .guide-pdf .large { padding-top: 48px; padding-bottom: 52px; }

  .mur-coachs { padding: 40px 0 56px; }
  .grille-coachs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .grille-coachs .nom { font-size: 22px; }
  .grille-coachs li.ouvert .fiche { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .fiche img { aspect-ratio: 4 / 5; }
  .fiche h2 { font-size: 44px; }
  .fiche p:not(.role) { font-size: 18px; max-width: 40em; }

  .assiettes .large { grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; padding-top: 48px; padding-bottom: 40px; }
  .bols { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); gap: 0; overflow: visible; }
  .bols li { grid-column: span 2; }
  .bols li:nth-child(4) { grid-column: 2 / span 2; margin-top: -8%; }
  .bols li:nth-child(5) { grid-column: 4 / span 2; margin-top: -8%; }
  .semaine-z2g .large { grid-template-columns: 1fr 1fr; column-gap: 56px; padding-top: 48px; padding-bottom: 56px; }
  .semaine-z2g .prix-z2g { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }

  .banniere-ar { padding: 48px 40px 52px; }
  .chiffres-ar .large { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 56px; padding-bottom: 60px; }
  .bon-a-savoir .large { grid-template-columns: 1fr 3fr; column-gap: 56px; padding-top: 48px; padding-bottom: 56px; }
  .bon-a-savoir ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

  .journal .large { padding-top: 56px; padding-bottom: 60px; }
  .sommaire li { grid-template-columns: 160px 1fr; column-gap: 32px; padding: 22px 0; }
  .sommaire time { grid-row: 1 / 4; padding-top: 6px; }
}