@charset "UTF-8";
/* ======================================================================== */
/* ===						 						 					 === */
/* ===  				   Paternoster Sebastien 	     				 === */
/* ===  				  		  PIXELABLE		 	     				 === */
/* ===																	 === */
/* ======================================================================== */
/* ======================================================================== */
/*  					       Variables & import							 */
/* ======================================================================== */
	/* Les polices sont servies par le site lui-même. Ce fichier les
	   demandait à Google, ce que la règle du projet interdit : aucune
	   dépendance distante côté visiteur, ni police, ni script, ni
	   mesure d'audience. Le CSS livré avait été corrigé à la main,
	   pas cette source : la recompiler ramenait l'appel à Google.

	   La seconde police, Cormorant Upright, venait de Google elle
	   aussi. Elle est remplacée par une pile de serif présentes sur
	   les machines, ce que le CSS livré faisait déjà. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-light.woff2") format("woff2"); }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-regular.woff2") format("woff2"); }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-bold.woff2") format("woff2"); }
	/* IBM Plex Sans et IBM Plex Mono, servies par le site comme Lato.
	   Elles portent la direction retenue pour l'espace membre : un
	   sans neutre pour le texte, une chasse fixe pour les chiffres
	   qui se lisent en colonne.

	   Le Sans est un fichier à graisse variable : les trois graisses
	   employées, 400, 500 et 600, sortent du même fichier, et une
	   seule requête les sert toutes les trois.

	   Le latin étendu est déclaré à part, avec sa plage de caractères :
	   le navigateur ne le télécharge que s'il rencontre un caractère
	   qui n'est pas dans le latin de base. Le « œ » de « cœur » en
	   fait partie, ce qui vaut d'être servi.

	   Licence SIL Open Font 1.1, voir assets/fonts/LISEZMOI.txt. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-medium-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ======================================================================== */
/*  							Reset style									 */
/* ======================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

a {
  text-decoration: none;
  color: inherit; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input {
  padding: 0;
  margin: 0;
  border: none; }

/* Le repère de focus n'est retiré qu'à la souris : au clavier il
   est la seule façon de savoir où l'on se trouve. */
input:focus:not(:focus-visible) {
  outline: none; }

iframe {
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute; }

::-moz-selection {
  background: #000;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #000;
  color: #fff;
  text-shadow: none; }

/* Les chiffres qui se lisent en colonne. L'en-tête pose la même
   pile en propriété personnalisée : la feuille la lit, avec cette
   valeur en repli. */
	/* Les teintes du club se lisent dans les propriétés personnalisées
	   que l'en-tête pose d'après ses réglages. La valeur de repli est
	   celle du club d'origine : sans réglage, rien ne change.

	   Cette source portait encore les teintes figées. La recompiler
	   défaisait donc toute la personnalisation : un club ayant choisi
	   le vert serait redevenu rouge sombre.

	   Les nuances dérivées ne sont plus calculées à la volée : elles
	   sont trois, celles que l'en-tête calcule d'après la couleur du
	   club. Onze nuances ad hoc obtenues par lighten() et darken() ne
	   suivaient de toute façon plus rien dès que le club changeait de
	   couleur, une propriété personnalisée n'étant pas calculable. */
	/* La couleur de fond du club, et non un blanc écrit en dur.

	   « Couleur de fond » se règle depuis la configuration et devient
	   --club-fond, que trente-huit déclarations de la feuille emploient.
	   Vingt-quatre autres peignaient un fond avec cette variable-ci,
	   figée au blanc : le club changeait sa couleur de fond et la voyait
	   apparaître sur trois surfaces et pas sur les deux autres, sans que
	   rien n'explique lesquelles.

	   Elle porte la même valeur par défaut : un club qui n'a rien changé
	   voit exactement ce qu'il voyait. Elle n'entre dans aucune fonction
	   de couleur de Sass, qui ne sait pas calculer sur une propriété
	   personnalisée : c'est la raison pour laquelle les nuances dérivées
	   ont déjà été retirées plus haut. */
/* ======================================================================== */
/*  							 	Style									 */
/* ======================================================================== */
/* ==================== ALL ==================== */
* {
  box-sizing: border-box;
  /* Le contour de focus est retiré à la souris, où il n'apprend
     rien : le clic dit déjà où l'on est. Il est rendu plus bas à
     qui navigue au clavier, pour qui il est la seule façon de
     savoir où il se trouve. */ }
  *:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none; }

 	/* Un mot trop long pour sa colonne poussait la page entière vers
	   la droite : un intitulé en capitales dans les conditions, et
	   demain une adresse web écrite par un club. Il se coupe. */
body {
  overflow-wrap: break-word; }

/* Les cases et boutons radio natifs prennent la couleur du club :
   une ligne, là où chaque écran redessinait les siens en noir. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--club-principale, #39449f); }

html, body {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  font-family: "IBM Plex Sans", "Lato", sans-serif;
  /* Le produit ne posait aucune couleur de texte de base : le corps
     héritait du noir par défaut du navigateur, et le réglage
     « Couleur du texte » du club n'atteignait que les rares endroits
     qui le nommaient. Titres, paragraphes, cellules et listes
     restaient au noir pur, quelle que soit la couleur choisie, et
     sur un fond de club sombre ils disparaissaient. La couleur
     part maintenant de la racine : tout ce qui n'en pose pas la
     reçoit. */
  color: var(--club-texte, #161a2e);
  /* La fonte est livrée en 300, 400 et 700 : le poids déclaré est
     un poids servi. 400 pour le texte courant ; le 300 reste aux
     grands titres des pages publiques, qui le portent bien. */
  font-weight: 400;
  background-color: var(--club-encre, #1f1f1f); }

body {
  height: auto;
  min-height: 100vh;
  max-width: 100%;
  max-width: 100vw;
  overflow-x: hidden; }

#background {
  width: 100%;
  height: 100%;
  display: block;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--club-encre, #1f1f1f);
  position: fixed; }

.container {
  display: block;
  width: calc(100% - 450px);
  margin: 50px 50px 50px 400px; }

/* L'espace membre travaille sur un fond calme, pas sur la photo du
   club. La photo reste le décor des pages publiques, où elle donne
   le ton ; derrière des tableaux, des formulaires et des chiffres,
   elle obligeait chaque panneau à rester translucide, et tout le
   texte se lisait sur un fond changeant. */
#page_compte {
  background-color: #f2f2f2;
  background-color: var(--club-surface-page, #f2f2f2);
  /* Sans contexte de formatage propre, la marge haute du premier
     bloc traverse le body : cinquante pixels du fond sombre de
     la racine apparaissaient en bandeau au-dessus de la page. */
  display: flow-root;
  /* La hiérarchie d'un écran de gestion. Chaque écran titrait en
     capitales centrées, et ses sections aussi, à la même taille :
     rien ne distinguait le nom de l'écran de ses parties, et les
     paragraphes d'explication centrés se lisaient mal. Le titre
     part à gauche, souligné du trait et d'un repère aux couleurs
     du club ; les sections deviennent des jalons discrets ; les
     explications reprennent l'alignement de lecture. */
  /* Un second h3 sur le même écran est une section, pas le nom de
     l'écran : il perd le repère et prend du champ. */
  /* Le titre d'un encart garde sa casse : les capitales restaient
     seules à crier dans un écran passé en bas de casse. */
  /* Le même jalon, pour les écrans dont les sections vivent dans
     un conteneur : « Mes données » titrait les siennes avec la
     classe des lignes dépliantes, curseur de commande compris,
     sans que rien ne se déplie. */ }
  #page_compte #background {
    display: none; }
  #page_compte section > h3,
  #page_compte section > form > h3 {
    position: relative;
    text-align: left;
    text-transform: none;
    letter-spacing: 0.01em;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--club-ligne, #e2e2e2); }
    #page_compte section > h3::after,
    #page_compte section > form > h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 44px;
      height: 2px;
      background-color: var(--club-principale, #39449f); }
  #page_compte section > h3 ~ h3 {
    font-size: 17px;
    margin-top: 34px; }
    #page_compte section > h3 ~ h3::after {
      display: none; }
  #page_compte section > h4 {
    text-align: left;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--club-texte-doux, #6b6e7b);
    margin: 30px 0 6px; }
  #page_compte section > h3 + p.center,
  #page_compte section > h4 + p.center {
    text-align: left;
    max-width: 62em; }
  #page_compte .encart_page > h3 {
    text-transform: none;
    font-size: 18px; }
  #page_compte .titre_section {
    text-align: left;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--club-texte-doux, #6b6e7b);
    margin: 30px 0 6px; }
  #page_compte .list_form:first-of-type .titre_section {
    margin-top: 0; }
  #page_compte section > p.center small {
    color: var(--club-texte-doux, #6b6e7b);
    font-size: 12.5px; }

.container_home {
  display: block;
  width: 500px;
  margin: 0;
  margin-left: calc(100% - 500px);
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--club-fond, #ffffff); }

.div_flex {
  display: flex;
  flex-wrap: nowrap; }
  .div_flex .flex_1 {
    flex: 1; }
  .div_flex .flex_2 {
    flex: 2; }
  .div_flex .flex_3 {
    flex: 3; }
  .div_flex .flex_4 {
    flex: 4; }
  .div_flex .flex_5 {
    flex: 5; }
  .div_flex .mid_flex {
    width: 50%; }
  .div_flex .tiers_flex {
    width: 33.33%; }
  .div_flex .tiers_flex.double_flex {
    width: 66.66%; }

div.center {
  text-align: center;
  display: block; }

/* « h1 » manquait à cette liste, du temps où le seul h1 du produit
   était le logo de la colonne. Maintenant que le titre de l'écran
   porte ce niveau, « .center », « .left », « .no_margin » et
   « .middle » ne l'atteignaient pas : un titre de page marqué
   « center » restait calé à gauche. */
h1, p, h2, h3, h4, h5, h6, span, b, a, i, label {
  line-height: 1.45;
  /* 400, et non plus 300 : le poids fin passait sur les grands
     titres, mais il portait aussi tout le texte courant, à 14 et
     16 pixels sur des fonds qui n'étaient pas toujours blancs. */
  font-weight: 400; }
  h1.center, p.center, h2.center, h3.center, h4.center, h5.center, h6.center, span.center, b.center, a.center, i.center, label.center {
    text-align: center;
    display: block; }
  h1.left, p.left, h2.left, h3.left, h4.left, h5.left, h6.left, span.left, b.left, a.left, i.left, label.left {
    text-align: left; }
  h1 sup, p sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup, span sup, b sup, a sup, i sup, label sup {
    color: var(--club-encre, #1f1f1f);
    text-transform: uppercase;
    position: relative;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    vertical-align: super; }
  h1.white, p.white, h2.white, h3.white, h4.white, h5.white, h6.white, span.white, b.white, a.white, i.white, label.white {
    color: var(--club-fond, #ffffff); }
  h1.white sup, p.white sup, h2.white sup, h3.white sup, h4.white sup, h5.white sup, h6.white sup, span.white sup, b.white sup, a.white sup, i.white sup, label.white sup {
    color: var(--club-fond, #ffffff); }
  h1.color, p.color, h2.color, h3.color, h4.color, h5.color, h6.color, span.color, b.color, a.color, i.color, label.color {
    color: var(--club-principale, #39449f); }
  h1.color_light, p.color_light, h2.color_light, h3.color_light, h4.color_light, h5.color_light, h6.color_light, span.color_light, b.color_light, a.color_light, i.color_light, label.color_light {
    color: var(--club-principale-vive, #d74f51); }
  h1 small, h1.small, p small, p.small, h2 small, h2.small, h3 small, h3.small, h4 small, h4.small, h5 small, h5.small, h6 small, h6.small, span small, span.small, b small, b.small, a small, a.small, i small, i.small, label small, label.small {
    font-size: 10px; }
  h1.middle, p.middle, h2.middle, h3.middle, h4.middle, h5.middle, h6.middle, span.middle, b.middle, a.middle, i.middle, label.middle {
    font-size: 15px; }
  h1 b, h1 strong, h1.strong, p b, p strong, p.strong, h2 b, h2 strong, h2.strong, h3 b, h3 strong, h3.strong, h4 b, h4 strong, h4.strong, h5 b, h5 strong, h5.strong, h6 b, h6 strong, h6.strong, span b, span strong, span.strong, b b, b strong, b.strong, a b, a strong, a.strong, i b, i strong, i.strong, label b, label strong, label.strong {
    font-weight: 600; }
  h1.no_margin, p.no_margin, h2.no_margin, h3.no_margin, h4.no_margin, h5.no_margin, h6.no_margin, span.no_margin, b.no_margin, a.no_margin, i.no_margin, label.no_margin {
    margin: 0 !important; }
  h1.font_serif, p.font_serif, h2.font_serif, h3.font_serif, h4.font_serif, h5.font_serif, h6.font_serif, span.font_serif, b.font_serif, a.font_serif, i.font_serif, label.font_serif {
    font-family: Georgia, "Times New Roman", serif; }
  h1.size_h5, p.size_h5, h2.size_h5, h3.size_h5, h4.size_h5, h5.size_h5, h6.size_h5, span.size_h5, b.size_h5, a.size_h5, i.size_h5, label.size_h5 {
    font-size: 18px; }
  h1.uppercase, p.uppercase, h2.uppercase, h3.uppercase, h4.uppercase, h5.uppercase, h6.uppercase, span.uppercase, b.uppercase, a.uppercase, i.uppercase, label.uppercase {
    text-transform: uppercase; }
  h1.back_white, p.back_white, h2.back_white, h3.back_white, h4.back_white, h5.back_white, h6.back_white, span.back_white, b.back_white, a.back_white, i.back_white, label.back_white {
    background-color: var(--club-fond, #ffffff); }
  h1.full, p.full, h2.full, h3.full, h4.full, h5.full, h6.full, span.full, b.full, a.full, i.full, label.full {
    width: 100%; }
  h1.text_inline, p.text_inline, h2.text_inline, h3.text_inline, h4.text_inline, h5.text_inline, h6.text_inline, span.text_inline, b.text_inline, a.text_inline, i.text_inline, label.text_inline {
    display: inline-block; }
  h1.big_text, p.big_text, h2.big_text, h3.big_text, h4.big_text, h5.big_text, h6.big_text, span.big_text, b.big_text, a.big_text, i.big_text, label.big_text {
    font-weight: 900;
    -webkit-text-shadow: 0 0 15px var(--club-encre, #1f1f1f);
    -ms-text-shadow: 0 0 15px var(--club-encre, #1f1f1f);
    -o-text-shadow: 0 0 15px var(--club-encre, #1f1f1f);
    -moz-text-shadow: 0 0 15px var(--club-encre, #1f1f1f);
    text-shadow: 0 0 15px var(--club-encre, #1f1f1f); }

label b {
  font-weight: 700; }

small {
  font-size: 12px; }

a, p {
  font-size: 16px; }

.btn, .btn2, button, a {
  cursor: pointer; }

 	/* L'échelle des titres. Les écrans de l'application titrent en h3
 	   capitales : à vingt-huit pixels fins, chaque écran criait son nom
 	   sur un tiers de la largeur. Vingt pixels demi-gras espacés font
 	   un titre d'écran, pas une enseigne ; h2 reste grand pour les
 	   pages publiques, qui en ont l'usage.

 	   Les capitales forcées sont retirées du h3 : un titre en bas de
 	   casse se lit d'un coup d'oeil, et la classe « uppercase » que les
 	   écrans posent encore est neutralisée dans l'espace membre, où
 	   la hiérarchie se dit par la taille et le trait, plus par le cri. */
/* Aucune règle ne donnait de taille à un h1 hors de l'en-tête : le
   titre d'une page publique promue au premier niveau sortait à la
   taille par défaut du navigateur, deux fois celle d'un h2, en gras
   et serré. Il prend ici la même allure qu'un h2, d'un cran plus
   grand et sans les capitales : c'est le titre de la page, pas un
   cri. */
h1 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.25; }

h2 {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase; }

h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em; }

h4 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3; }

h5 {
  font-size: 18px;
  font-weight: 500; }

h6 {
  font-size: 16px; }

h6.fontscript {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  opacity: 0.8; }
  h6.fontscript b {
    color: var(--club-principale, #39449f);
    font-weight: 700; }

ul.list_dotted {
  list-style: none; }
  ul.list_dotted li {
    padding: 5px 15px;
    list-style: none;
    margin-left: 10px;
    /* La puce etait une image de cinq pixels sur cinq,
       img/dot_picto.png, qui n'a jamais ete versee au depot :
       toute page atteignant cette regle demandait un fichier
       absent et recevait une 404. Le meme point se dessine en
       degre radial, sans requete, sans fichier a livrer, et il
       prend la couleur du club au lieu d'un gris fige. */
    background-image: radial-gradient(circle at 2.5px 2.5px, var(--club-principale, #39449f) 2.5px, transparent 2.5px);
    background-repeat: no-repeat;
    background-size: 5px 5px;
    background-position: top 11px left; }
    ul.list_dotted li a, ul.list_dotted li p {
      line-height: 1; }
  ul.list_dotted.right li {
    background-position: center right; }
ul.list_pagination {
  margin: 50px auto;
  position: relative;
  display: block;
  text-align: center; }
  ul.list_pagination li {
    position: relative;
    text-align: center;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: #444f5a;
    border: 1px solid #eeeeee;
    text-align: center;
    font-size: 14px;
    margin: 0 2px;
    opacity: 0.7;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    ul.list_pagination li a {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 14px;
      padding: 6px;
      color: #eeeeee; }
    ul.list_pagination li:hover, ul.list_pagination li:focus {
      opacity: 1; }
    ul.list_pagination li.actif {
      -moz-transform: scale(1.3);
      -o-transform: scale(1.3);
      -ms-transform: scale(1.3);
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      margin: 0 8px;
      opacity: 1;
      background-color: var(--club-principale, #39449f);
      color: var(--club-fond, #ffffff);
      border: 1px solid var(--club-fond, #ffffff); }
      ul.list_pagination li.actif a {
        pointer-events: none;
        cursor: initial; }
    ul.list_pagination li:last-child, ul.list_pagination li:first-child {
      display: inline-block !important; }
    ul.list_pagination li.icon_disabled_last {
      margin-left: 20px; }
      ul.list_pagination li.icon_disabled_last:after {
        left: -22px; }
      ul.list_pagination li.icon_disabled_last:before {
        left: -13px; }
    ul.list_pagination li.icon_disabled_first {
      margin-right: 20px; }
      ul.list_pagination li.icon_disabled_first:after {
        right: -22px; }
      ul.list_pagination li.icon_disabled_first:before {
        right: -13px; }
    ul.list_pagination li.icon_disabled_first:after, ul.list_pagination li.icon_disabled_first:before, ul.list_pagination li.icon_disabled_last:after, ul.list_pagination li.icon_disabled_last:before {
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      content: '';
      display: inline-block;
      background-color: #444f5a;
      border: 1px solid #eeeeee;
      position: absolute;
      top: 24px;
      width: 3px;
      height: 3px; }
    ul.list_pagination li.icon_disabled_first:hover:before, ul.list_pagination li.icon_disabled_first:focus:before, ul.list_pagination li.icon_disabled_first:hover:after, ul.list_pagination li.icon_disabled_first:focus:after, ul.list_pagination li.icon_disabled_last:hover:before, ul.list_pagination li.icon_disabled_last:focus:before, ul.list_pagination li.icon_disabled_last:hover:after, ul.list_pagination li.icon_disabled_last:focus:after {
      opacity: 0.7; }
ul.font_serif li {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; }

.prt_btninline {
  text-align: center; }
  .prt_btninline .btn, .prt_btninline .btn2 {
    width: auto;
    display: inline-block; }
  .prt_btninline.no_center {
    text-align: inherit; }

button {
  border-radius: 0; }

.btn, .btn2 {
  padding: 10px 22px;
  margin: 0 auto;
  /* Un bouton prend la place de son intitulé. La moitié de la
     colonne, quelle que soit la longueur du texte, faisait de
     chaque « Enregistrer » une barre, et de l'écran une pile de
     barres : l'action ne se distinguait plus de la structure. */
  width: fit-content;
  min-width: 150px;
  max-width: 100%;
  color: var(--club-fond, #ffffff);
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  border: none;
  display: block;
  /* Retiré à la souris seulement : voir le repère de focus en fin de feuille. */
  cursor: pointer;
  background: var(--club-bouton, var(--club-principale, #39449f));
  border-radius: var(--club-arrondi, 4px);
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .btn:focus:not(:focus-visible), .btn2:focus:not(:focus-visible) {
    outline: none; }
  .btn.btn_block, .btn2.btn_block {
    width: 100%; }
  .btn:hover, .btn:focus, .btn2:hover, .btn2:focus {
    background: var(--club-principale-fonce, #881f20);
    color: var(--club-bouton-texte, #fff); }
  .btn.btn_big, .btn2.btn_big {
    /* Les capitales criaient plus qu'elles ne guidaient : le
       poids et la taille suffisent au premier rôle. */
    padding: 10px;
    font-size: 17px;
    font-weight: 600; }
  .btn small, .btn2 small {
    display: block;
    font-size: 8px;
    font-style: italic; }
  .btn.btn_black, .btn2.btn_black {
    background: var(--club-encre, #1f1f1f); }
    .btn.btn_black:hover, .btn.btn_black:focus, .btn2.btn_black:hover, .btn2.btn_black:focus {
      background: var(--club-principale, #39449f);
      color: var(--club-fond, #ffffff); }
  .btn.btn_round, .btn2.btn_round {
    border-radius: 25px; }
  .btn.btn_inline, .btn2.btn_inline {
    display: inline-block; }
  .btn.btn_del, .btn2.btn_del {
    display: inline-block;
    opacity: 0.7;
    padding: 4px 14px 5px;
    font-size: 13px;
    width: fit-content;
    min-width: 0;
    color: var(--club-fond, #ffffff);
    background-color: var(--club-principale-fonce, #881f20);
    cursor: pointer;
    margin: 5px auto;
    border: none; }
    .btn.btn_del:hover, .btn.btn_del:focus, .btn2.btn_del:hover, .btn2.btn_del:focus {
      opacity: 1; }
  .btn.disabled, .btn2.disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 1;
    pointer-events: none;
    cursor: initial; }

.btn2 {
  background: #bace00; }

.btn_center {
  display: block;
  margin: 0 auto; }

.btn_left {
  margin: 0; }

.btn_white {
  background: var(--club-fond, #fff);
  color: var(--club-principale, var(--club-principale, #39449f));
  /* Le secondaire se reconnaît à son trait : sans lui, un bouton
     blanc sur une carte blanche n'était qu'un texte centré. */
  border: 1px solid var(--club-principale-claire, #efb7b8); }
  .btn_white:hover, .btn_white:focus {
    background: var(--club-principale-claire, #efb7b8);
    color: var(--club-principale-fonce, #881f20); }

.btn_grey {
  background: var(--club-encre, #1f1f1f);
  color: var(--club-fond, #ffffff);
  border-color: var(--club-encre, #1f1f1f); }
  .btn_grey:hover, .btn_grey:focus {
    background: var(--club-fond, #ffffff);
    color: var(--club-encre, #1f1f1f);
    border-color: var(--club-encre, #1f1f1f); }

 	/* Le petit bouton des lignes de tableau. Les gabarits l'ecrivent
	   sous deux noms ; aucun n'avait de regle, tous rendaient pleins. */
.btn_small, .small_btn {
  min-width: 0;
  padding: 6px 14px;
  font-size: 13px;
  /* Le retrait et la taille du texte donnaient vingt-neuf pixels de
     haut : sous le seuil que le controle des commandes tactiles
     impose, et bien sous les quarante-quatre qu'un doigt demande.
     Le bouton « Constater » de l'ecran Argent etait le dernier a
     passer dessous. Une hauteur minimale suffit, sans toucher au
     retrait qui tient la ligne du tableau. */
  min-height: 32px; }

/* Sur un ecran tactile, la hauteur du doigt prime sur la densite du
   tableau : la ligne s'aere plutot que de proposer une cible qu'on
   rate. La largeur, ici, est le seul temoin disponible du tactile
   qui vaille : « pointer: coarse » manque un ordinateur a ecran
   tactile, et le controle du depot mesure des largeurs. */
@media (max-width: 768px) {
  .btn_small, .small_btn {
    min-height: 44px; } }
/* L'asterisque des champs obligatoires heritait du sup generique. */
sup.required {
  color: var(--club-principale, #39449f);
  font-size: 13px;
  text-transform: none; }

.btn_disabled {
  pointer-events: none;
  cursor: initial;
  background: #8a8f99;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); }

.btn_erreur {
  pointer-events: none;
  cursor: initial;
  background: var(--club-principale-fonce, #881f20);
  color: #eeeeee; }

.btn_event {
  position: relative;
  z-index: 9;
  background: var(--club-principale, #39449f);
  color: var(--club-fond, #ffffff);
  width: auto;
  max-width: 90%;
  font-size: 14px; }
  .btn_event:hover, .btn_event:focus {
    background: var(--club-principale, #39449f);
    color: var(--club-fond, #ffffff); }

/* ================================  MARGIN  ================================ */
.m-top0 {
  margin-top: 0px !important; }

.m-top5 {
  margin-top: 5px !important; }

.m-top10 {
  margin-top: 10px !important; }

.m-top15 {
  margin-top: 15px !important; }

.m-top25 {
  margin-top: 25px !important; }

.m-top50 {
  margin-top: 50px !important; }

.m-top75 {
  margin-top: 75px !important; }

.m-top100 {
  margin-top: 100px !important; }

.m-top150 {
  margin-top: 150px !important; }

.m-top200 {
  margin-top: 200px !important; }

.m-top250 {
  margin-top: 250px !important; }

.m-bottom0 {
  margin-bottom: 0px !important; }

.m-bottom5 {
  margin-bottom: 5px !important; }

.m-bottom10 {
  margin-bottom: 10px !important; }

.m-bottom15 {
  margin-bottom: 15px !important; }

.m-bottom20 {
  margin-bottom: 20px !important; }

.m-bottom25 {
  margin-bottom: 25px !important; }

.m-bottom50 {
  margin-bottom: 50px !important; }

.m-bottom75 {
  margin-bottom: 75px !important; }

.m-bottom100 {
  margin-bottom: 100px !important; }

.m-bottom150 {
  margin-bottom: 150px !important; }

.m-bottom200 {
  margin-bottom: 200px !important; }

.m-bottom250 {
  margin-bottom: 250px !important; }

.m-right0 {
  margin-right: 0px !important; }

.m-right5 {
  margin-right: 5px !important; }

.m-right10 {
  margin-right: 10px !important; }

.m-right15 {
  margin-right: 15px !important; }

.m-right20 {
  margin-right: 20px !important; }

.m-right25 {
  margin-right: 25px !important; }

.m-right50 {
  margin-right: 50px !important; }

.m-right75 {
  margin-right: 75px !important; }

.m-right100 {
  margin-right: 100px !important; }

.m-right150 {
  margin-right: 150px !important; }

.m-right200 {
  margin-right: 200px !important; }

.m-right250 {
  margin-right: 250px !important; }

.m-left0 {
  margin-left: 0px !important; }

.m-left5 {
  margin-left: 5px !important; }

.m-left10 {
  margin-left: 10px !important; }

.m-left15 {
  margin-left: 15px !important; }

.m-left25 {
  margin-left: 25px !important; }

.m-left50 {
  margin-left: 50px !important; }

.m-left75 {
  margin-left: 75px !important; }

.m-left100 {
  margin-left: 100px !important; }

.m-left150 {
  margin-left: 150px !important; }

.m-left200 {
  margin-left: 200px !important; }

.m-left250 {
  margin-left: 250px !important; }

.m-top-5 {
  margin-top: -5px !important; }

.m-top-10 {
  margin-top: -10px !important; }

.m-top-15 {
  margin-top: -15px !important; }

.m-top-25 {
  margin-top: -25px !important; }

.m-top-50 {
  margin-top: -50px !important; }

.m-top-75 {
  margin-top: -75px !important; }

.m-top-100 {
  margin-top: -100px !important; }

.m-top-150 {
  margin-top: -150px !important; }

.m-top-200 {
  margin-top: -200px !important; }

.m-top-250 {
  margin-top: -250px !important; }

.m-bottom-5 {
  margin-bottom: -5px !important; }

.m-bottom-10 {
  margin-bottom: -10px !important; }

.m-bottom-15 {
  margin-bottom: -15px !important; }

.m-bottom-25 {
  margin-bottom: -25px !important; }

.m-bottom-50 {
  margin-bottom: -50px !important; }

.m-bottom-75 {
  margin-bottom: -75px !important; }

.m-bottom-100 {
  margin-bottom: -100px !important; }

.m-bottom-150 {
  margin-bottom: -150px !important; }

.m-bottom-200 {
  margin-bottom: -200px !important; }

.m-bottom-250 {
  margin-bottom: -250px !important; }

/* ================================  PADDING  ================================ */
.p-all5 {
  padding: 5px !important; }

.p-all10 {
  padding: 10px !important; }

.p-all15 {
  padding: 15px !important; }

.p-all25 {
  padding: 25px !important; }

.p-all50 {
  padding: 50px !important; }

.p-top5 {
  padding-top: 5px !important; }

.p-top10 {
  padding-top: 10px !important; }

.p-top15 {
  padding-top: 15px !important; }

.p-top25 {
  padding-top: 25px !important; }

.p-top50 {
  padding-top: 50px !important; }

.p-top100 {
  padding-top: 100px !important; }

.p-bottom5 {
  padding-bottom: 5px !important; }

.p-bottom10 {
  padding-bottom: 10px !important; }

.p-bottom15 {
  padding-bottom: 15px !important; }

.p-bottom25 {
  padding-bottom: 25px !important; }

.p-bottom50 {
  padding-bottom: 50px !important; }

.p-bottom75 {
  padding-bottom: 75px !important; }

.p-bottom100 {
  padding-bottom: 100px !important; }

.p-left5 {
  padding-left: 5px !important; }

.p-left10 {
  padding-left: 10px !important; }

.p-left15 {
  padding-left: 15px !important; }

.p-left20 {
  padding-left: 20px !important; }

.p-left25 {
  padding-left: 25px !important; }

.p-left50 {
  padding-left: 50px !important; }

.p-right5 {
  padding-right: 5px !important; }

.p-right10 {
  padding-right: 10px !important; }

.p-right15 {
  padding-right: 15px !important; }

.p-right20 {
  padding-right: 20px !important; }

.p-right25 {
  padding-right: 25px !important; }

.p-right50 {
  padding-right: 50px !important; }

/* ==================== PLUGIN ==================== */
.date_dispo {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0; }

.datepicker-container, .datepickers-container {
  z-index: 9999999999999;
  margin-top: -90px; }

.datepicker--cell,
.datepicker--nav-title,
.datepicker--nav-action,
.datepicker-inline .datepicker {
  border-radius: 0 !important; }

.datepicker--days-names {
  margin: 8px 0 10px !important; }

.datepicker-inline .datepicker {
  width: 100%;
  width: calc(100% - 2px);
  margin-top: -8px;
  border-bottom: none; }

.datepicker--cell {
  border: 1px solid var(--club-fond, #ffffff);
  /* Un jour fermé se disait par la nuance la plus claire de l'accent
     du club, posée sur un voile à trois pour cent : 1,56 pour un.
     Le jour restait lisible pour qui l'avait déjà lu, et pour
     personne d'autre. Il se dit maintenant par un fond, non par un
     texte effacé : le fond marque la case comme fermée, le texte
     reste lisible. */ }
  .datepicker--cell.-disabled- {
    background-color: color-mix(in srgb, var(--club-texte, #161a2e) 8%, var(--club-fond, #ffffff));
    pointer-events: none;
    color: var(--club-texte-doux, #787a86) !important; }

/* ==================== LIGHTBOX ==================== */
.close {
  position: absolute;
  top: 12px;
  height: 19px;
  right: 12px;
  width: 19px;
  border-radius: 50%;
  background-color: var(--club-fond, #ffffff);
  text-align: center;
  cursor: pointer;
  color: var(--club-encre, #1f1f1f);
  border: 2px solid var(--club-encre, #1f1f1f);
  display: inline-block;
  padding-top: 3px;
  font-weight: 700;
  font-size: 10px;
  /* C'était un <div>. C'est devenu un <button>, pour être
     atteignable au clavier et annoncé comme une commande : il
     faut donc défaire ce qu'un navigateur habille sur un bouton,
     et lui rendre un contour visible au clavier. */
  line-height: 1;
  font-family: inherit;
  appearance: none;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .close:hover, .close:focus {
    background-color: var(--club-encre, #1f1f1f);
    color: var(--club-fond, #ffffff); }
  .close:focus-visible {
    outline: 2px solid var(--club-encre, #1f1f1f);
    outline-offset: 2px; }

.lightbox {
  padding: 15px;
  z-index: 9999999999999;
  position: fixed !important;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  background-color: var(--club-fond, #ffffff);
  display: none;
  max-height: 90vh;
  /* La fenêtre défile quand elle déborde.
   *
   *  « max-height » sans « overflow » coupe le contenu au lieu de le
   *  rendre atteignable. La fenêtre de la licence porte un titre,
   *  deux paragraphes en gras et deux boutons pleine largeur : sur
   *  un téléphone en paysage, ou avec la taille de texte du système
   *  augmentée, le second bouton — celui qui mène au renouvellement,
   *  c'est-à-dire l'action que la fenêtre réclame — passait sous la
   *  coupure, et rien ne permettait d'y descendre.
   *
   *  « overscroll-behavior: contain » garde le geste dans la
   *  fenêtre : sans lui, arriver au bas de la liste fait défiler la
   *  page derrière, qui n'est pas celle qu'on lit. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-box-shadow: 0 0 15px rgba(1, 1, 1, 0.25) ;
  -moz-box-shadow: 0 0 15px rgba(1, 1, 1, 0.25) ;
  -ms-box-shadow: 0 0 15px rgba(1, 1, 1, 0.25) ;
  -o-box-shadow: 0 0 15px rgba(1, 1, 1, 0.25) ;
  box-shadow: 0 0 15px rgba(1, 1, 1, 0.25) ; }
  .lightbox h3 {
    color: var(--club-principale, #39449f);
    text-transform: uppercase;
    margin-bottom: 15px; }
  .lightbox h4 {
    color: var(--club-principale, #39449f);
    text-transform: uppercase;
    margin-bottom: 15px; }
  .lightbox h6 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    margin-top: -15px;
    opacity: 0.8; }
  .lightbox .flexbox {
    margin: 5px 0;
    display: flex;
    flex-wrap: nowrap; }
    .lightbox .flexbox a {
      padding: 15px 20px;
      font-weight: 300;
      text-transform: uppercase;
      line-height: 1.5; }
  .lightbox a.small {
    margin-top: 15px; }

/* #lightbox_image a ete retire : le bloc n'etait jamais rempli — son
   gestionnaire etait commente — et il portait un <img src=""> que
   plusieurs navigateurs resolvent en l'adresse de la page courante.
   Voir ecrans/includes/footer.php. */
#background_lightbox {
  z-index: 999999999999;
  position: fixed !important;
  left: 0;
  top: 0;
  background-color: var(--club-encre, #1f1f1f);
  opacity: 0.9;
  width: 100%;
  height: 100%;
  display: none; }

#licence {
  width: 650px;
  max-width: 90%;
  margin-left: -325px; }

@media (max-width: 800px) {
  #licence {
    width: 90%;
    left: 0;
    margin-left: 5%; } }
@media (max-width: 550px) {
  .lightbox {
    width: 90%;
    left: 0;
    margin-left: 5%; } }
@media (max-height: 450px) {
  .lightbox {
    max-height: inherit;
    position: absolute !important;
    top: 0 !important;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    -moz-transform: translateY(20px);
    transform: translateY(20px); } }
/* ==================== LOADER ==================== */
.loader {
  z-index: 99999999999999999999999999;
  position: fixed;
  width: 100%;
  height: 100%;
  display: inline-block;
  top: 0;
  left: 0;
  opacity: 1;
  background-color: var(--club-fond, #ffffff);
  /* Le logo du club, émis en --club-logo ; sans enseigne, rien. */
  background-image: var(--club-logo, none);
  background-size: 100px 100px;
  background-position: center;
  background-repeat: no-repeat;
  display: none; }

#sponsors {
  position: absolute;
  top: 0;
  z-index: 2;
  right: -15px;
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2s;
  animation-duration: 1s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: none !important; }
  #sponsors a {
    -moz-transform: skew(20deg, 0deg);
    -o-transform: skew(20deg, 0deg);
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
    display: block;
    position: relative;
    background-color: var(--club-fond, #ffffff);
    -webkit-box-shadow: 0 0 5px var(--club-encre, #1f1f1f) ;
    -moz-box-shadow: 0 0 5px var(--club-encre, #1f1f1f) ;
    -ms-box-shadow: 0 0 5px var(--club-encre, #1f1f1f) ;
    -o-box-shadow: 0 0 5px var(--club-encre, #1f1f1f) ;
    box-shadow: 0 0 5px var(--club-encre, #1f1f1f) ;
    border-top: 2px solid var(--club-principale, #39449f);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    #sponsors a span {
      color: var(--club-encre, #1f1f1f);
      padding: 10px 30px 10px 15px;
      display: block;
      position: relative;
      -moz-transform: skew(-20deg, 0deg);
      -o-transform: skew(-20deg, 0deg);
      -ms-transform: skew(-20deg, 0deg);
      -webkit-transform: skew(-20deg, 0deg);
      transform: skew(-20deg, 0deg);
      font-weight: 500;
      font-style: initial;
      font-family: "IBM Plex Sans", "Lato", sans-serif;
      margin: 0;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    #sponsors a:hover {
      background-color: var(--club-principale, #39449f); }
      #sponsors a:hover span {
        color: var(--club-fond, #ffffff); }

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible; }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
/* ==================== HEADER ==================== */
#page_accueil, #page__en_construction {
  /* Le pied était positionné par-dessus le formulaire : « Mot de
     passe oublié », « Devenir membre » et les comptes de démo
     passaient sous le bandeau, inatteignables. La page défile,
     et la colonne du formulaire laisse la place au pied. */
  height: auto;
  min-height: 100vh;
  overflow-y: auto; }
  #page_accueil header, #page__en_construction header {
    right: 0;
    left: inherit; }
    #page_accueil header .btn_discover, #page__en_construction header .btn_discover {
      display: none; }
    #page_accueil header .logo_club, #page__en_construction header .logo_club {
      display: block;
      margin: 25px auto;
      text-align: center;
      width: 165px; }
  #page_accueil .container_home, #page__en_construction .container_home {
    padding-bottom: 160px; }

#page__en_construction header {
  display: none; }

/* Le logo du club. Il était un « h1 » : le titre de premier niveau de
   chaque page était donc le nom du club, répété d'un écran à l'autre,
   et le vrai titre de l'écran n'existait pas. Le logo est redevenu un
   lien ordinaire dans un « div.logo_club », et le nom de l'écran a
   pris le h1. Les quatorze règles qui habillaient « header h1 » ont
   suivi le logo : laissées telles quelles elles n'habillaient plus
   rien, et le h1 du contenu héritait de la mise en forme d'une
   enseigne de cent trente pixels de large. */
header {
  z-index: 7;
  width: 500px;
  display: block;
  position: fixed;
  width: 500px;
  top: 0;
  /* « Fond de l'en-tête » se règle depuis la configuration. La
     variable était émise et cette feuille ne la lisait pas : le
     club choisissait une couleur et ne voyait rien changer. */
  background-color: var(--club-menu, #fff); }
  header .logo_club {
    width: 130px;
    height: auto;
    max-width: 90%;
    display: inline-block;
    margin: 18px 15px 0 15px;
    position: relative;
    text-align: center; }
    header .logo_club a {
      display: block;
      position: relative;
      cursor: pointer;
      width: 100%; }
      header .logo_club a img {
        /* La largeur suit la hauteur, elle ne s'y ajoute pas.
           À « width: 100% », l'image occupait les cent
           soixante-cinq pixels du bloc pendant que la hauteur
           maximale réglée par le club la ramenait à soixante :
           un logo carré de 512 sur 512 s'affichait en 165 sur
           60 sur la page d'accueil, écrasé aux deux tiers.
           C'est la première chose qu'un visiteur voit du club. */
        width: auto;
        max-width: 100%;
        margin: 0 auto; }
  header h2 {
    width: 175px;
    height: 175px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    background-color: var(--club-fond, #ffffff);
    border: 1px solid var(--club-principale, #39449f);
    -webkit-box-shadow: 0 0 0 10px var(--club-fond, #ffffff) ;
    -moz-box-shadow: 0 0 0 10px var(--club-fond, #ffffff) ;
    -ms-box-shadow: 0 0 0 10px var(--club-fond, #ffffff) ;
    -o-box-shadow: 0 0 0 10px var(--club-fond, #ffffff) ;
    box-shadow: 0 0 0 10px var(--club-fond, #ffffff) ;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
    header h2 a {
      display: block;
      position: relative;
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 80% auto;
      background-size: contain;
      width: 100%;
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
      header h2 a img {
        width: 100%;
        position: absolute;
        left: -60px; }
  header.left_header {
    z-index: 999999999;
    background: var(--club-fond, #ffffff);
    left: 0;
    position: fixed;
    width: 350px;
    display: inline-block;
    min-height: 100vh;
    /* Sur le fond calme de l'espace membre, la colonne se
       termine par un trait, pas par une coupe franche. */
    border-right: 1px solid var(--club-ligne, #e2e2e2); }
    header.left_header .btn_discover {
      background: var(--club-fond, #ffffff);
      color: var(--club-principale, #39449f);
      text-align: center;
      width: 100%;
      display: block;
      opacity: 1;
      cursor: pointer;
      font-weight: 300;
      margin-top: 0 !important;
      padding-top: 0 !important;
      /* Quarante pixels mangeaient un dixième de la colonne :
         c'est un lien vers la page du club, pas une enseigne. */
      font-size: 28px;
      line-height: 1.2;
      padding-bottom: 6px; }
      header.left_header .btn_discover span {
        display: none; }
    header.left_header .logo_club {
      float: none;
      margin-right: auto;
      margin-left: auto;
      display: block; }

/* ==================== ACCUEIL ==================== */
.home_texte {
  margin-top: -50px;
  position: absolute;
  padding-left: 100px;
  text-align: left;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Le mot d'accueil n'est plus un h2 pose avant le h1 : c'est un
     paragraphe, et la feuille lui garde son allure. */ }
  .home_texte .salut_accueil {
    color: var(--club-fond, #ffffff);
    font-size: 70px;
    font-family: "IBM Plex Sans", "Lato", sans-serif;
    font-weight: 100;
    text-transform: none;
    line-height: 1.1;
    margin: 0; }
  .home_texte h1 {
    color: var(--club-fond, #ffffff);
    font-size: 100px;
    font-family: "IBM Plex Sans", "Lato", sans-serif;
    font-weight: 700; }
  .home_texte .btn {
    background: var(--club-fond, #ffffff);
    color: var(--club-principale, var(--club-principale, #39449f));
    text-align: left;
    width: auto;
    min-width: 0;
    display: inline-block;
    /* Pleins, et non plus laiteux : un bouton aux trois quarts
       visible sur une photo n'invitait personne. */
    opacity: 1; }
    .home_texte .btn:hover, .home_texte .btn:focus {
      background: var(--club-principale-claire, #efb7b8); }

#form_connexion, .form_style {
  width: 350px;
  max-width: 100%; }
  #form_connexion fieldset, .form_style fieldset {
    padding: 5px;
    position: relative; }
    #form_connexion fieldset label, .form_style fieldset label {
      position: absolute;
      z-index: 1;
      color: var(--club-principale, #39449f);
      font-size: 16px;
      padding: 3px 9px 2px;
      top: 17px;
      border-right: 1px solid var(--club-principale, #39449f); }
    #form_connexion fieldset input, .form_style fieldset input {
      padding: 8px 10px 7px 40px;
      border: 1px solid var(--club-principale, #39449f);
      margin-bottom: 5px;
      -webkit-box-shadow: 0 0 0 6px var(--club-fond, #ffffff) ;
      -moz-box-shadow: 0 0 0 6px var(--club-fond, #ffffff) ;
      -ms-box-shadow: 0 0 0 6px var(--club-fond, #ffffff) ;
      -o-box-shadow: 0 0 0 6px var(--club-fond, #ffffff) ;
      box-shadow: 0 0 0 6px var(--club-fond, #ffffff) ; }
  #form_connexion .middle, .form_style .middle {
    /* Deux liens en capitales grasses se lisaient comme des
       titres : un lien s'annonce par son soulignement. */
    font-weight: 500;
    color: var(--club-encre, #1f1f1f);
    border-bottom: 1px dotted rgba(1, 1, 1, 0);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  #form_connexion .shadow, .form_style .shadow {
    -webkit-text-shadow: 0 0 20px var(--club-fond, #ffffff);
    -ms-text-shadow: 0 0 20px var(--club-fond, #ffffff);
    -o-text-shadow: 0 0 20px var(--club-fond, #ffffff);
    -moz-text-shadow: 0 0 20px var(--club-fond, #ffffff);
    text-shadow: 0 0 20px var(--club-fond, #ffffff); }
  #form_connexion a.shadow, .form_style a.shadow {
    border-bottom: 1px dotted rgba(1, 1, 1, 0.35); }
  #form_connexion a.shadow:hover, #form_connexion a.shadow:focus, .form_style a.shadow:hover, .form_style a.shadow:focus {
    border-bottom: 1px dotted var(--club-encre, #1f1f1f); }
  #form_connexion.form_full, .form_style.form_full {
    width: 100%;
    text-align: center; }
    #form_connexion.form_full input, .form_style.form_full input {
      text-align: center; }

/* ==================== CONTENT ==================== */
.separate {
  display: inline-block;
  margin: 0 6px; }

.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }
  .vertical-align.vertical_disabled {
    top: 0%;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%); }

section {
  z-index: 1;
  margin: 0 0 25px;
  padding: 30px 35px;
  position: relative;
  /* Opaque, et non plus blanc aux trois quarts : un panneau
     translucide laissait la photo moduler le contraste de chaque
     ligne de texte. La carte est bordée et à peine détachée,
     l'ombre géante de cinquante pixels n'a plus cours ici. */
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: calc(var(--club-arrondi, 4px) * 2);
  box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04); }

.bloc_text {
  background-color: var(--club-surface-page, #f2f2f2);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  padding: 18px 20px; }
  .bloc_text form fieldset.fieldset_radio, .bloc_text form fieldset.fieldset_checkbox {
    margin-bottom: 5px; }
    .bloc_text form fieldset.fieldset_radio div, .bloc_text form fieldset.fieldset_checkbox div {
      width: 100%; }
    .bloc_text form fieldset.fieldset_radio label, .bloc_text form fieldset.fieldset_checkbox label {
      text-transform: none;
      width: 100%; }
  .bloc_text .img_max {
    width: 100%; }
  .bloc_text .border_img {
    border: 10px solid var(--club-fond, #ffffff); }
  .bloc_text.bloc_important {
    background-color: var(--club-encre, #1f1f1f);
    border-top: 3px solid var(--club-fond, #ffffff); }
    .bloc_text.bloc_important h4, .bloc_text.bloc_important h5, .bloc_text.bloc_important p {
      color: var(--club-fond, #ffffff); }
  .bloc_text.bloc_white {
    background-color: var(--club-fond, #ffffff);
    padding: 0; }
    .bloc_text.bloc_white .border_img {
      border: 2px solid var(--club-encre, #1f1f1f); }

table {
  width: 100%; }
  table td {
    padding: 5px 10px;
    line-height: 1.5; }

/* La colonne des jours de l'horaire public. Ses deux cents pixels
   étaient écrits dans chaque cellule : sur un téléphone, il n'en
   restait qu'une centaine pour les heures, qui se coupaient mot à
   mot. */
td.colonne_jour {
  width: 200px; }

@media (max-width: 600px) {
  td.colonne_jour {
    width: auto;
    min-width: 92px;
    padding-right: 0; } }
/* La colonne de gauche devient une pile : le menu prend la place
   restante et defile en lui-meme, au lieu d'une hauteur devinee qui
   laissait le pied de colonne recouvrir ses dernieres entrees. */
body:not(#page_accueil):not(#page__en_construction) header.left_header {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header > * {
    flex: 0 0 auto; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow: auto;
      /* la liste s'etire sur la place restante : ses lignes
         restent en haut au lieu de s'y repartir */
      align-content: flex-start;
      /* le pied de colonne est fixe par-dessus : la liste
         s'arrete au-dessus de lui */
      padding-bottom: 160px;
      /* L'ascenseur se voit : la liste se coupait a mi-entree
         sans qu'aucun indice ne dise qu'elle defile. */
      scrollbar-width: thin;
      scrollbar-color: var(--club-ligne, #d5d5d5) transparent; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu::-webkit-scrollbar {
        width: 8px; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu::-webkit-scrollbar-thumb {
        background-color: var(--club-ligne, #d5d5d5);
        border-radius: 8px; }

/* Le lien d'evitement : invisible jusqu'au premier Tab. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 2000000000;
  padding: 10px 16px;
  background-color: var(--club-fond, #ffffff);
  color: var(--club-texte, #161a2e);
  border: 2px solid var(--club-principale, #39449f);
  border-radius: var(--club-arrondi, 4px); }
  .evitement:focus {
    left: 12px; }

/* Le bloc d'un refus, centre sans s'emboiter dans le conteneur. */
.refus_bloc {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  /* Le titre du refus change de niveau selon le contexte : premier
     niveau quand le refus est toute la page, second quand la barre
     d'ecran a deja pose le sien. Son allure, elle, ne doit pas en
     dependre : le rang dans le plan de la page se lit au lecteur
     d'ecran, pas a la taille du texte. */ }
  .refus_bloc h1, .refus_bloc h2, .refus_bloc h3 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em; }

/* Le sommaire de la page d'administration. */
.sommaire_admin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px; }
  .sommaire_admin a {
    display: inline-block;
    padding: 9px 14px;
    font-size: 13.5px;
    background-color: var(--club-fond, #ffffff);
    color: var(--club-texte, #161a2e);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px); }
    .sommaire_admin a:hover, .sommaire_admin a:focus {
      border-color: var(--club-principale, #39449f);
      color: var(--club-principale, #39449f); }

/* Le chemin vers les pages du club, sous le formulaire de connexion. */
.acces_public {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: 18px; }
  .acces_public a {
    font-size: 13.5px;
    color: var(--club-texte, #161a2e);
    border-bottom: 1px solid var(--club-ligne, #e2e2e2);
    /* assez haut pour un doigt : la mesure tactile fait foi */
    padding: 8px 2px; }
    .acces_public a:hover, .acces_public a:focus {
      color: var(--club-principale, #39449f);
      border-color: currentColor; }

/* Un titre de groupe dans le menu, et la sortie qui ferme la liste. */
.sous_menu li.menu_groupe {
  padding: 14px 24px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-texte-doux, #787a86); }

.sous_menu li.menu_sortie {
  margin-top: 12px;
  border-top: 1px solid var(--club-ligne, #e2e2e2); }

/* Le bouton qui ouvre le menu sur un petit écran. Au-delà, la
   colonne montre sa liste et le bouton n'existe pas. */
.menu_mobile {
  display: none;
  width: calc(100% - 36px);
  margin: 6px 18px 10px;
  padding: 11px 36px 11px 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--club-texte, #161a2e);
  background-color: var(--club-fond, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  overflow: visible;
  white-space: nowrap;
  text-overflow: unset;
  cursor: pointer;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .menu_mobile:hover, .menu_mobile:focus {
    border-color: var(--club-principale, #39449f); }

.menu_ouvert .menu_mobile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 6l5-5 5 5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

.sous_menu {
  z-index: 2;
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  background-color: var(--club-fond, #ffffff);
  margin: 0 auto 0;
  max-height: calc(100vh - 416px);
  overflow: auto; }
  .sous_menu li {
    position: relative;
    width: 100%;
    text-align: left;
    background-color: rgba(1, 1, 1, 0);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .sous_menu li a {
      display: block;
      /* Cinquante pixels de retrait pour trois cents de large :
         le libellé mangeait la moitié de la colonne. Resserré
         encore d'un cran : plus d'entrées tiennent à l'écran
         avant que la liste ne doive défiler. */
      padding: 9px 24px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--club-texte, var(--club-encre, #1f1f1f));
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      .sous_menu li a.active {
        background-color: var(--club-principale-claire, #efb7b8) !important;
        /* L'entrée courante porte aussi son liseré : la teinte
           claire seule se perd quand le club choisit une
           couleur pâle. */
        box-shadow: inset 3px 0 0 var(--club-principale, #39449f); }
        .sous_menu li a.active::after {
          display: block;
          color: var(--club-principale, #39449f) !important; }
      .sous_menu li a:hover, .sous_menu li a:focus {
        background-color: var(--club-principale-claire, #efb7b8); }
        .sous_menu li a:hover:after, .sous_menu li a:focus:after {
          display: block;
          color: var(--club-encre, #1f1f1f);
          opacity: 0.5; }
      .sous_menu li a:after {
        content: '\f105';
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: var(--club-principale, #39449f);
        opacity: 0.5;
        font-size: 18px;
        position: absolute;
        top: 7px;
        right: 18px;
        display: none; }
    .sous_menu li #btn_reserver {
      /* Le double anneau incrusté datait le menu d'une autre
         époque : l'entrée d'action est un bouton, celui du
         produit, dans les marges du menu. */
      background-color: var(--club-bouton, var(--club-principale, #39449f));
      margin: 10px 18px 14px;
      border-radius: var(--club-arrondi, 4px);
      width: calc(100% - 36px); }
      .sous_menu li #btn_reserver a {
        color: var(--club-bouton-texte, var(--club-fond, #ffffff));
        padding: 12px 16px;
        font-size: 16px;
        text-align: center;
        border-radius: var(--club-arrondi, 4px); }
        .sous_menu li #btn_reserver a:hover, .sous_menu li #btn_reserver a:focus {
          background-color: var(--club-principale-fonce, #881f20); }
        .sous_menu li #btn_reserver a:after {
          opacity: 1;
          display: block;
          color: var(--club-bouton-texte, var(--club-fond, #ffffff));
          top: 11px;
          content: '\f103'; }
      .sous_menu li #btn_reserver.active {
        background-color: var(--club-principale-fonce, #881f20); }
  .sous_menu form {
    padding: 15px 20px 20px;
    overflow: hidden;
    z-index: 3;
    position: relative;
    width: 100%;
    left: 0;
    top: -4px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-shadow: inset 0 0 0 3px var(--club-principale-fonce, #881f20), inset 0 0 0 5px var(--club-fond, #ffffff);
    -wekbit-box-shadow: inset 0 0 0 3px var(--club-principale-fonce, #881f20), inset 0 0 0 5px var(--club-fond, #ffffff);
    -moz-box-shadow: inset 0 0 0 3px var(--club-principale-fonce, #881f20), inset 0 0 0 5px var(--club-fond, #ffffff);
    -ms-box-shadow: inset 0 0 0 3px var(--club-principale-fonce, #881f20), inset 0 0 0 5px var(--club-fond, #ffffff);
    background-color: var(--club-principale-fonce, #881f20);
    display: none; }
    .sous_menu form #close_form {
      width: 25px;
      height: 25px;
      background-color: var(--club-encre, #1f1f1f);
      color: #eeeeee;
      text-align: center;
      font-size: 14px;
      padding: 4px 0 0;
      font-weight: 500;
      cursor: pointer;
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-block;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      .sous_menu form #close_form:hover, .sous_menu form #close_form:focus {
        background-color: #060606;
        color: var(--club-fond, #ffffff); }
    .sous_menu form ::-webkit-input-placeholder {
      color: var(--club-fond, #ffffff) !important; }
    .sous_menu form ::-moz-placeholder {
      color: var(--club-fond, #ffffff) !important; }
    .sous_menu form :-ms-input-placeholder {
      color: var(--club-fond, #ffffff) !important; }
    .sous_menu form :-moz-placeholder {
      color: var(--club-fond, #ffffff) !important; }
    .sous_menu form ::placeholder {
      color: var(--club-fond, #ffffff) !important; }
    .sous_menu form button {
      width: 100%;
      padding: 0;
      color: var(--club-fond, #ffffff);
      padding: 12px 10px 11px;
      font-size: 18px;
      background-color: var(--club-fond, #ffffff);
      border-radius: 0;
      color: var(--club-principale, #39449f); }
      .sous_menu form button:hover, .sous_menu form button:focus {
        background-color: #e6e6e6;
        color: var(--club-principale-fonce, #881f20); }
    .sous_menu form fieldset {
      width: 100%;
      padding: 0;
      margin-bottom: 10px; }
      .sous_menu form fieldset select:hover, .sous_menu form fieldset input:hover,
      .sous_menu form fieldset select:focus, .sous_menu form fieldset input:focus,
      .sous_menu form fieldset select, .sous_menu form fieldset input {
        height: 48px;
        margin: 0;
        padding: 3px 10px;
        background-color: transparent;
        border-bottom: 1px solid var(--club-fond, #ffffff);
        color: var(--club-fond, #ffffff) !important;
        box-shadow: none; }
      .sous_menu form fieldset:nth-child(2) select, .sous_menu form fieldset:nth-child(2) input {
        border-right: 0; }
      .sous_menu form fieldset:nth-child(3) select, .sous_menu form fieldset:nth-child(3) input {
        border-right: 0; }

/* ==================== PRODUITS ==================== */
.list_produits {
  margin: 0 auto 0;
  display: block;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  max-width: 1024px;
  padding: 0 !important; }
  .list_produits li {
    margin-top: 25px;
    width: 25%;
    padding: 25px;
    display: inline-block;
    position: relative; }
    .list_produits li:after {
      content: '';
      display: block;
      padding-bottom: 100%; }
    .list_produits li a {
      cursor: pointer;
      position: absolute;
      height: 100%;
      height: calc(100% - 30px);
      top: 15px;
      width: 100%;
      width: calc(100% - 30px);
      left: 15px;
      background-color: var(--club-fond, #ffffff);
      overflow: hidden;
      -moz-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      -webkit-transition: all 0.1s ease-in-out;
      -ms-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out;
      -webkit-box-shadow: 0 0 5px rgba(1, 1, 1, 0.2) ;
      -moz-box-shadow: 0 0 5px rgba(1, 1, 1, 0.2) ;
      -ms-box-shadow: 0 0 5px rgba(1, 1, 1, 0.2) ;
      -o-box-shadow: 0 0 5px rgba(1, 1, 1, 0.2) ;
      box-shadow: 0 0 5px rgba(1, 1, 1, 0.2) ; }
      .list_produits li a h5 {
        z-index: 2;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 16px;
        width: 100%;
        padding: 4px 10px;
        background-color: rgba(1, 1, 1, 0.65);
        color: var(--club-fond, #ffffff); }
      .list_produits li a .img {
        z-index: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--club-fond, #ffffff);
        background-position: center bottom;
        background-size: auto 100%;
        background-size: contain;
        margin: 0;
        background-repeat: no-repeat; }
      .list_produits li a .prix {
        z-index: 2;
        margin: 0;
        text-align: center;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 17px;
        font-weight: 900;
        padding: 3px 15px;
        color: var(--club-principale, #39449f);
        font-style: initial;
        font-family: "IBM Plex Sans", "Lato", sans-serif;
        background-color: var(--club-fond, #ffffff);
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; }
      .list_produits li a .btn_buy {
        background-color: var(--club-principale, #39449f);
        color: var(--club-fond, #ffffff);
        font-weight: 900;
        padding: 10px 15px;
        font-style: initial;
        font-family: "IBM Plex Sans", "Lato", sans-serif;
        text-transform: uppercase;
        z-index: 3;
        position: absolute;
        font-size: 16px;
        opacity: 0;
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -93px;
        -moz-transform: scale(0.9);
        -o-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; }
        .list_produits li a .btn_buy:after {
          content: '';
          display: block;
          position: absolute;
          width: 100%;
          width: calc(100% + 4px);
          height: 100%;
          height: calc(100% + 4px);
          top: -4px;
          left: -4px;
          border: 2px solid var(--club-principale, #39449f); }
      .list_produits li a:hover, .list_produits li a:focus {
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1); }
        .list_produits li a:hover .btn_buy, .list_produits li a:focus .btn_buy {
          opacity: 0.85;
          -moz-transition: all 0.3s 0.2s ease-in-out;
          -o-transition: all 0.3s 0.2s ease-in-out;
          -webkit-transition: all 0.3s 0.2s ease-in-out;
          -ms-transition: all 0.3s 0.2s ease-in-out;
          transition: all 0.3s 0.2s ease-in-out; }

#eshop.lightbox {
  padding: 0;
  position: absolute !important; }
  #eshop.lightbox h4 {
    padding: 10px;
    background-color: var(--club-encre, #1f1f1f);
    color: var(--club-fond, #ffffff); }
  #eshop.lightbox .bloc_text {
    padding: 0 15px 15px 15px; }
  #eshop.lightbox .close {
    top: -10px;
    right: -10px; }
  #eshop.lightbox form fieldset {
    padding: 0; }
  #eshop.lightbox form fieldset select, #eshop.lightbox form fieldset input, #eshop.lightbox form fieldset textarea,
  #eshop.lightbox form fieldset select:focus, #eshop.lightbox form fieldset input:focus, #eshop.lightbox form fieldset textarea:focus {
    background-color: #eeeeee;
    border-bottom: #eeeeee;
    -webkit-box-shadow: 0 0 0px rgba(1, 1, 1, 0) ;
    -moz-box-shadow: 0 0 0px rgba(1, 1, 1, 0) ;
    -ms-box-shadow: 0 0 0px rgba(1, 1, 1, 0) ;
    -o-box-shadow: 0 0 0px rgba(1, 1, 1, 0) ;
    box-shadow: 0 0 0px rgba(1, 1, 1, 0) ; }
  #eshop.lightbox form fieldset select:focus, #eshop.lightbox form fieldset input:focus, #eshop.lightbox form fieldset textarea:focus {
    border-bottom: var(--club-principale, #39449f); }
  #eshop.lightbox .div_img {
    z-index: 1;
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-position: center center;
    background-size: contain;
    margin: 0;
    border: 2px solid var(--club-encre, #1f1f1f);
    background-repeat: no-repeat; }
    #eshop.lightbox .div_img .lightbox_image {
      z-index: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  #eshop.lightbox strong {
    font-weight: 700 !important; }
  #eshop.lightbox i {
    font-style: italic !important; }
  #eshop.lightbox u {
    text-decoration: line-through !important; }
  #eshop.lightbox a {
    color: var(--club-encre, #1f1f1f) !important; }

@media (max-width: 720px) {
  /* La ligne d'une séance ne partage plus sa largeur avec son
     bouton : le titre prend la ligne, la feuille de séance se
     range dessous. Et les champs d'une barre de recherche
     s'empilent, chacun sur sa ligne, dans le cadre de la barre. */
  .entete_seance {
    flex-wrap: wrap; }

  .entete_seance .btn {
    flex: 1 1 100%;
    justify-content: center; }

  form.form_flex input, form.form_flex select, form.form_flex button {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0; }

  #eshop.lightbox .div_flex {
    flex-wrap: wrap; }
    #eshop.lightbox .div_flex .mid_flex {
      width: 100%;
      padding: 15px 0 !important; }
    #eshop.lightbox .div_flex .tiers_flex {
      width: 100%;
      padding: 5px 0 !important; } }
#panier {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 10px;
  width: 250px;
  cursor: pointer;
  z-index: 99; }
  #panier #btn_panier {
    z-index: 2;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    right: 10px;
    top: 0px;
    padding: 10px;
    color: var(--club-encre, #1f1f1f);
    /* Le panier était un <a href="#"> sans nom. C'est un bouton :
       il ouvre un panneau, il ne mène nulle part. Le fond et le
       cadre qu'un navigateur pose sur un bouton sont retirés,
       le contour du clavier reste. */
    background: none;
    border: 0;
    font-family: inherit;
    appearance: none;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    			/* Le nombre d'articles du panier. Il s'écrivait en six pixels,
    			   gris très pâle, posé sur le glyphe du chariot : celui-ci est
    			   dessiné comme du texte et non comme un fond, si bien que le
    			   fond réel restait le blanc de la carte, et le compteur
    			   sortait à 1,16 pour un, illisible à toute taille.
    
    			   C'est une vraie pastille : l'aplat du bouton du club, son
    			   texte, et une taille qui se lit. Le couple bouton /
    			   bouton-texte est celui que le club règle ensemble, donc le
    			   seul dont le contraste est tenu. */ }
    #panier #btn_panier:focus-visible {
      outline: 2px solid var(--club-encre, #1f1f1f);
      outline-offset: 2px; }
    #panier #btn_panier:hover, #panier #btn_panier:focus {
      color: var(--club-principale, #39449f); }
    #panier #btn_panier:after {
      font-size: 24px;
      content: '\f07a';
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    #panier #btn_panier.actif {
      right: -8px;
      top: -9px;
      color: var(--club-encre, #1f1f1f); }
      #panier #btn_panier.actif:after {
        color: var(--club-encre, #1f1f1f);
        font-size: 18px;
        content: '\f057'; }
      #panier #btn_panier.actif i {
        opacity: 0; }
    #panier #btn_panier i {
      display: inline-block;
      position: absolute;
      top: 2px;
      right: 2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      box-sizing: border-box;
      border-radius: 999px;
      background-color: var(--club-bouton, var(--club-principale, #39449f));
      color: var(--club-bouton-texte, #ffffff);
      font-size: 11px;
      font-style: normal;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      opacity: 1;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
  #panier .list_panier {
    z-index: 1;
    position: relative;
    width: 100%;
    display: block;
    background-color: var(--club-fond, #ffffff);
    opacity: 1;
    padding: 15px; }
    #panier .list_panier ul {
      position: relative;
      margin-top: 10px;
      display: block; }
      #panier .list_panier ul li {
        position: relative;
        border: 1px solid var(--club-encre, #1f1f1f);
        border-bottom: none;
        display: block;
        width: 100%;
        padding: 5px 30px 5px 55px;
        min-height: 50px; }
        #panier .list_panier ul li h5 {
          font-size: 14px;
          position: relative;
          text-align: left;
          font-weight: 400;
          margin: 0;
          z-index: 9;
          padding: 0; }
          #panier .list_panier ul li h5.datahover i:hover small {
            display: inline-block; }
          #panier .list_panier ul li h5 i {
            font-style: initial; }
          #panier .list_panier ul li h5 small {
            display: inline-block;
            display: none;
            width: 150px;
            margin: 0;
            border-radius: 2px;
            font-size: 10px;
            word-break: break-all;
            background-color: var(--club-fond, #ffffff);
            color: var(--club-encre, #1f1f1f);
            padding: 2px 4px;
            border: 1px solid var(--club-encre, #1f1f1f);
            position: absolute;
            font-style: italic;
            z-index: 9; }
        #panier .list_panier ul li .prix {
          font-weight: 900;
          font-size: 16px;
          color: var(--club-principale, #39449f); }
        #panier .list_panier ul li .img {
          display: inline-block;
          position: absolute;
          left: -1px;
          top: -1px;
          width: 50px;
          height: 50px;
          border: 1px solid var(--club-encre, #1f1f1f);
          background-position: center center;
          background-size: cover;
          margin: 0;
          background-repeat: no-repeat; }
        #panier .list_panier ul li .del_panier {
          /* C'était un <span> : ni atteignable au clavier, ni
             annonçable. C'est un <button>, dont on neutralise
             l'apparence native pour que rien ne bouge à l'oeil. */
          border: 0;
          -webkit-appearance: none;
          appearance: none;
          display: block;
          cursor: pointer;
          position: absolute;
          right: 0px;
          top: 0px;
          opacity: 0.5;
          padding: 10px;
          width: 25px;
          height: 100%;
          background-color: #eeeeee;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
          #panier .list_panier ul li .del_panier:hover, #panier .list_panier ul li .del_panier:focus {
            background-color: #d5d5d5;
            opacity: 1; }
          #panier .list_panier ul li .del_panier:after {
            color: var(--club-encre, #1f1f1f);
            font-size: 16px;
            content: '\f057';
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            position: absolute;
            top: 15px;
            right: 4px;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -webkit-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out; }
  #panier .btn {
    width: 100%;
    display: block;
    font-size: 13px;
    padding: 5px 10px; }
    #panier .btn:hover, #panier .btn:focus {
      background-color: var(--club-encre, #1f1f1f);
      color: var(--club-fond, #ffffff);
      border-color: var(--club-encre, #1f1f1f); }
  #panier .total {
    cursor: initial;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 13px;
    padding: 5px 10px;
    color: var(--club-fond, #ffffff);
    background-color: var(--club-encre, #1f1f1f); }

/* ==================== GALLERIE ==================== */
.flex_gallerie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  .flex_gallerie video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer; }
  .flex_gallerie > div {
    border: 2px solid var(--club-principale, #39449f);
    width: 23%;
    height: 0;
    cursor: pointer;
    padding-top: 15%;
    position: relative;
    display: inline-block;
    background-color: #FFF;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 1%; }
    .flex_gallerie > div a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      cursor: pointer;
      opacity: 0; }
  .flex_gallerie .div_folder {
    background-color: var(--club-principale, #39449f) !important; }
    .flex_gallerie .div_folder a {
      cursor: pointer;
      opacity: 0.9;
      color: #fff;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center; }

/* ==================== FORM ==================== */
form {
  margin: 0 auto 0;
  display: block;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  max-width: 1024px; }
  form.form_small {
    width: 100%;
    max-width: 400px; }
  form.form_background {
    padding: 25px;
    background-color: var(--club-fond, #ffffff); }
  form.form_flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
    form.form_flex p {
      width: 100%; }
    form.form_flex > input, form.form_flex > select, form.form_flex > button {
      width: 33.33%; }
    form.form_flex input, form.form_flex select {
      font-size: 15px;
      padding: 8px 10px 7px;
      margin: 0;
      background-color: #eeeeee;
      border-radius: 0;
      border: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      overflow: hidden; }
      form.form_flex input:focus, form.form_flex select:focus {
        background-color: var(--club-fond, #ffffff); }
    form.form_flex button {
      border-radius: 0; }
    form.form_flex ::-webkit-input-placeholder {
      color: var(--club-encre, #1f1f1f); }
    form.form_flex ::-moz-placeholder {
      color: var(--club-encre, #1f1f1f); }
    form.form_flex :-ms-input-placeholder {
      color: var(--club-encre, #1f1f1f); }
    form.form_flex :-moz-placeholder {
      color: var(--club-encre, #1f1f1f); }
    form.form_flex.form_flex2 > input, form.form_flex.form_flex2 > select, form.form_flex.form_flex2 > button {
      width: 50%; }
  form h3 {
    display: block;
    width: 100%; }
  form fieldset {
    padding: 0 10px;
    width: 50%;
    display: block; }
    form fieldset.readonly select, form fieldset.readonly input, form fieldset.readonly textarea {
      cursor: not-allowed !important;
      background-color: var(--club-surface-page, #f2f2f2) !important;
      color: var(--club-texte-doux, #787a86); }
      form fieldset.readonly select:focus, form fieldset.readonly input:focus, form fieldset.readonly textarea:focus {
        border-color: var(--club-ligne, #e2e2e2); }
    form fieldset.fieldset_background {
      background-color: rgba(255, 255, 255, 0.4);
      padding-top: 10px; }
    form fieldset.fieldset_full {
      width: 100%; }
    form fieldset.fieldset_table {
      font-size: 14px;
      padding: 0;
      padding-bottom: 15px; }
      form fieldset.fieldset_table tr {
        padding: 0;
        border-bottom: 1px solid #eee; }
        form fieldset.fieldset_table tr:last-child {
          border: none; }
        form fieldset.fieldset_table tr:last-child td {
          background-color: var(--club-encre, #1f1f1f);
          font-size: 16px;
          text-align: center;
          color: var(--club-fond, #ffffff);
          border: none; }
      form fieldset.fieldset_table td {
        border-right: 1px solid #eee;
        background-color: var(--club-fond, #ffffff);
        padding: 4px 6px; }
        form fieldset.fieldset_table td:first-child {
          width: 210px; }
        form fieldset.fieldset_table td:last-child {
          width: 75px;
          text-align: right; }
    form fieldset.fieldset_hide {
      position: absolute;
      top: -9999px;
      left: -9999px;
      width: 0px;
      height: 0px;
      display: inline-block;
      margin: 0;
      padding: 0; }
    form fieldset.fieldset_photo {
      position: relative;
      padding-left: 50px; }
      form fieldset.fieldset_photo div {
        width: 40px;
        height: 40px;
        display: inline-block;
        position: absolute;
        top: 25px;
        left: 10px;
        border: 1px solid var(--club-fond, #ffffff);
        background-color: #eeeeee;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
    form fieldset.fieldset_radio div {
      position: absolute;
      top: -9999px;
      left: -9999px;
      width: 0px;
      height: 0px;
      overflow: hidden;
      display: inline-block;
      margin: 0;
      padding: 0; }
    form fieldset.fieldset_radio, form fieldset.fieldset_checkbox {
      margin-bottom: 15px;
      /* « span.span_radio » habillait un faux interrupteur, dessiné
         par un <span> qu'un script retournait au clic. Aucun écran
         du produit ne le pose, et le gestionnaire qui l'actionnait
         a été retiré de main.js pour la même raison. Un faux
         interrupteur n'est de toute façon pas ce qu'il faut : une
         case à cocher se coche au clavier, s'annonce, et porte son
         état sans qu'on ait à le peindre. */ }
      form fieldset.fieldset_radio div, form fieldset.fieldset_checkbox div {
        display: inline-block;
        position: relative; }
      form fieldset.fieldset_radio p, form fieldset.fieldset_checkbox p {
        display: inline-block;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        max-width: calc(100% - 60px);
        vertical-align: middle; }
      form fieldset.fieldset_radio input, form fieldset.fieldset_radio label, form fieldset.fieldset_checkbox input, form fieldset.fieldset_checkbox label {
        display: inline-block; }
      form fieldset.fieldset_radio label, form fieldset.fieldset_checkbox label {
        margin-right: 25px;
        line-height: 1.3; }
      form fieldset.fieldset_radio input, form fieldset.fieldset_checkbox input {
        width: 30px;
        margin: 2px 0;
        vertical-align: top;
        /* À la souris seulement : au clavier, cette ombre est
           le seul repère de focus d'une case. */ }
        form fieldset.fieldset_radio input:focus:not(:focus-visible), form fieldset.fieldset_checkbox input:focus:not(:focus-visible) {
          box-shadow: none; }
    form fieldset.fieldset_center {
      text-align: center; }
      form fieldset.fieldset_center select, form fieldset.fieldset_center input, form fieldset.fieldset_center label {
        max-width: 400px;
        margin: 0 auto; }
    form fieldset.fieldset_checkbox {
      position: relative;
      width: 100%; }
      form fieldset.fieldset_checkbox div {
        padding-left: 25px;
        display: inline-block;
        min-width: 45%;
        /* La même règle dessinait les boutons radio en carrés
           noirs : un choix unique se reconnaît à son rond. */ }
        form fieldset.fieldset_checkbox div input {
          border-radius: 2px;
          left: 0;
          position: absolute;
          top: 1px;
          cursor: pointer;
          border: 2px solid var(--club-texte, #2b2b2b);
          padding: 0;
          width: 14px;
          height: 14px;
          display: inline-block;
          background-color: var(--club-fond, #ffffff);
          -moz-appearance: none;
          -ms-appearance: none;
          -o-appearance: none;
          -webkit-appearance: none;
          appearance: none; }
          form fieldset.fieldset_checkbox div input:checked {
            background-color: var(--club-principale, #39449f);
            border-color: var(--club-principale, #39449f);
            -webkit-box-shadow: 0 0 0 2px var(--club-fond, #ffffff) inset ;
            -moz-box-shadow: 0 0 0 2px var(--club-fond, #ffffff) inset ;
            -ms-box-shadow: 0 0 0 2px var(--club-fond, #ffffff) inset ;
            -o-box-shadow: 0 0 0 2px var(--club-fond, #ffffff) inset ;
            box-shadow: 0 0 0 2px var(--club-fond, #ffffff) inset ; }
        form fieldset.fieldset_checkbox div input[type="radio"] {
          border-radius: 50%; }
        form fieldset.fieldset_checkbox div.div_full {
          min-width: 100%; }
      form fieldset.fieldset_checkbox.fieldset_checkbox_inline div {
        display: inline-block;
        width: auto;
        min-width: auto;
        padding-left: 20px; }
    form fieldset.small_fieldset label {
      color: var(--club-fond, #ffffff); }
    form fieldset.small_fieldset input, form fieldset.small_fieldset select {
      font-size: 15px;
      padding: 7px 10px 6px;
      margin: 4px 0 15px;
      background-color: #eeeeee; }
      form fieldset.small_fieldset input:focus, form fieldset.small_fieldset select:focus {
        background-color: var(--club-fond, #ffffff); }
    form fieldset.small_fieldset select {
      height: 33px; }
    form fieldset label {
      min-height: 20px; }
    form fieldset label, form fieldset label a {
      color: var(--club-texte, var(--club-encre, #1f1f1f));
      /* Les capitales forcées rendaient chaque étiquette de la
         même largeur criarde, adresse électronique comprise :
         la casse d'origine se lit mieux et se tape telle
         quelle. Le poids suffit à la distinguer du champ. */
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      font-family: "IBM Plex Sans", "Lato", sans-serif;
      display: block;
      text-align: left; }
      form fieldset label a, form fieldset label a a {
        color: var(--club-principale, #39449f);
        display: inline-block; }
      form fieldset label i, form fieldset label a i {
        text-decoration: italic; }
    form fieldset select, form fieldset input, form fieldset textarea {
      /* Un champ se reconnaît à son trait, pas à une ombre de
         cinquante pixels : sur le fond photographique, le
         halo dessinait le champ ; sur une carte, il salissait
         toute la surface. Le trait dit aussi l'état : il
         prend la couleur du club quand le champ a le focus,
         sans changer la couleur de ce qu'on y écrit. */
      border-radius: var(--club-arrondi, 4px);
      margin: 6px 0 18px;
      width: 100%;
      display: block;
      position: relative;
      padding: 9px 12px 8px;
      font-size: 15px;
      font-family: "IBM Plex Sans", "Lato", sans-serif;
      color: var(--club-texte, var(--club-encre, #1f1f1f));
      background-color: var(--club-fond, #fff);
      resize: none;
      				/* Le trait du champ. « --club-ligne » se déduit de l'encre à
      				   0,80 vers le blanc : sur la carte blanche qui porte le
      				   formulaire il valait 1,51 pour un, et le champ, qui prend
      				   par ailleurs la couleur de fond de cette carte, n'était
      				   plus signalé par rien. Un formulaire ressemblait à un
      				   paragraphe.
      
      				   Le trait se déduit maintenant du texte et du fond du club,
      				   dans ce rapport-là : il suit le club, y compris quand
      				   celui-ci prend un fond sombre, où c'est l'inverse d'un
      				   gris pâle qu'il faut. La déclaration qui précède reste
      				   comme repli pour un navigateur sans color-mix. */
      border: 1px solid var(--club-ligne, #e2e2e2);
      border-color: color-mix(in srgb, var(--club-texte, #161a2e) 55%, var(--club-fond, #ffffff));
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      form fieldset select:focus:not(:focus-visible), form fieldset input:focus:not(:focus-visible), form fieldset textarea:focus:not(:focus-visible) {
        outline: none; }
      form fieldset select:focus, form fieldset input:focus, form fieldset textarea:focus {
        border-color: var(--club-principale, var(--club-principale, #39449f)); }
      form fieldset select.input_grey, form fieldset input.input_grey, form fieldset textarea.input_grey {
        color: var(--club-texte-doux, #787a86);
        background-color: var(--club-surface-page, #f2f2f2); }
      form fieldset select strong, form fieldset input strong, form fieldset textarea strong {
        font-weight: 700 !important; }
      form fieldset select i, form fieldset input i, form fieldset textarea i {
        font-style: italic !important; }
      form fieldset select u, form fieldset input u, form fieldset textarea u {
        text-decoration: line-through !important; }
      form fieldset select a, form fieldset input a, form fieldset textarea a {
        color: var(--club-encre, #1f1f1f) !important; }
    form fieldset select:not(#form_invitation) {
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      /* L'apparence native est retirée : le chevron l'est donc
         aussi, et rien ne disait plus qu'une liste se déroule.
         Il revient en image embarquée, aucun appel réseau. */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 32px; }
    form fieldset input[type="date"] {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      min-height: 38px;
      width: 100%; }
    form fieldset select {
      height: 37px; }
    form fieldset textarea {
      height: 120px; }
  form .btn {
    margin-top: 0; }

.list_form {
  width: 100%;
  display: block;
  margin: 3px 0; }

.slide_form {
  padding: 18px;
  display: none; }
  .slide_form.actif {
    display: block; }

.btn_form {
  /* Ces titres dépliants étaient des bandes sombres : blanc cassé
     sur gris foncé, opacité réduite, texte centré. Une liste de
     quarante séances ou de quarante membres devenait un mur de
     bandes où rien ne se lisait en colonne. Une ligne de liste
     est une carte claire, bordée, alignée à gauche. */
  cursor: pointer;
  padding: 9px 16px;
  text-align: left;
  color: var(--club-texte, #161a2e);
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 15px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  /* Le déclencheur d'un formulaire de création n'est pas une
     ligne de données : il s'annonce comme une action. La bande
     pleine teintée ressemblait à un bandeau désactivé ; le trait
     pointillé et la croix disent « ajouter » sans peindre. */
  /* Le gabarit pose « center » sur chaque ligne : une donnée se
     lit en colonne, seul le déclencheur d'action reste centré. */ }
  .btn_form small {
    display: inline-block;
    font-size: 12.5px;
    color: var(--club-texte-doux, #787a86);
    font-style: normal; }
  .btn_form b {
    font-weight: 600; }
  .btn_form:hover, .btn_form:focus, .btn_form.actif {
    border-color: var(--club-principale, #39449f); }
  .btn_form.actif {
    background-color: var(--club-principale-claire, #efb7b8); }
  .btn_form.btn_theform {
    text-align: center;
    font-weight: 600;
    color: var(--club-principale-fonce, #881f20);
    background-color: transparent;
    border: 1px dashed var(--club-principale, #39449f); }
    .btn_form.btn_theform::before {
      content: '+';
      display: inline-block;
      margin-right: 8px;
      font-weight: 700; }
    .btn_form.btn_theform:hover, .btn_form.btn_theform:focus {
      background-color: var(--club-principale-claire, #efb7b8);
      border-style: solid; }
  .btn_form.disabled {
    cursor: default;
    opacity: 0.6; }
  .btn_form.center:not(.btn_theform) {
    text-align: left; }

/* La ligne d'une séance : le titre dépliant et la feuille de
   séance côte à côte, au lieu d'un bouton posé seul sur sa ligne
   au-dessus de chaque séance. */
.entete_seance {
  display: flex;
  align-items: stretch;
  gap: 8px; }
  .entete_seance .btn_form {
    flex: 1;
    min-width: 0; }
  .entete_seance .btn {
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    display: flex;
    align-items: center; }

.slide_form {
  /* Le panneau déplié était gris foncé au milieu d'un écran
     clair : il reprend le fond de page, dans le cadre de sa
     ligne. Les textes que le gabarit marque « white » y étaient
     blancs sur sombre ; sur fond clair, ils reprennent l'encre,
     sans qu'il faille retoucher trente écrans. */
  background-color: var(--club-surface-page, #f2f2f2);
  width: 100%;
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-top: none;
  border-radius: 0 0 var(--club-arrondi, 4px) var(--club-arrondi, 4px);
  /* Les petits champs des formulaires de modification gardaient
     leur etiquette blanche : elle n'a pas de classe, le correctif
     ci-dessus ne la voyait pas. */
  /* Les encarts d'information vivaient sur un voile noir herite
     du fond photographique : sur panneau clair, une carte. */ }
  .slide_form b {
    display: inline-block; }
  .slide_form p.white, .slide_form span.white, .slide_form b.white, .slide_form label.white, .slide_form h4.white, .slide_form h5.white, .slide_form a.white {
    color: var(--club-texte, #161a2e); }
    .slide_form p.white sup, .slide_form span.white sup, .slide_form b.white sup, .slide_form label.white sup, .slide_form h4.white sup, .slide_form h5.white sup, .slide_form a.white sup {
      color: var(--club-principale, #39449f); }
  .slide_form fieldset.small_fieldset label {
    color: var(--club-texte, #161a2e); }
    .slide_form fieldset.small_fieldset label sup {
      color: var(--club-principale, #39449f); }
  .slide_form .encart {
    width: 100%;
    background-color: var(--club-fond, #ffffff);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px); }
    .slide_form .encart .fa-check-circle {
      color: var(--club-secondaire, #0a7d62); }
    .slide_form .encart .fa-times-circle {
      color: var(--club-principale, #39449f); }

/* Le pave « inscription & assurance » de Mon solde, et la fiche
   d'un encadrant : des cartes, plus des voiles sur la photo. */
.encart_page {
  display: block;
  background-color: var(--club-fond, #ffffff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px); }

/* La fiche d'un encadrant : une tuile de grille, dont elle reprend
   le cadre et le remplissage. Ne restent ici que ses propres
   éléments. */
.fiche_equipe {
  gap: 6px; }
  .fiche_equipe .puce {
    align-self: flex-start;
    margin-bottom: 2px; }
  .fiche_equipe .fiche_nom {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600; }
  .fiche_equipe .fiche_courriel {
    margin: 0;
    font-size: 13.5px; }
  .fiche_equipe .fiche_courriel a {
    color: var(--club-principale, #39449f); }
  .fiche_equipe .fiche_texte {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--club-texte, #161a2e); }

/* ==================== COMMANDE ==================== */
.choix_paiements, #info_bancontact {
  width: 100%;
  padding: 0; }
  .choix_paiements .flex, #info_bancontact .flex {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    text-align: center; }
    @media (max-width: 500px) {
      .choix_paiements .flex, #info_bancontact .flex {
        flex-wrap: wrap; } }
    .choix_paiements .flex .carte, #info_bancontact .flex .carte {
      position: relative;
      text-align: center;
      width: 50%;
      padding: 5px 2px 0;
      cursor: pointer;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      opacity: 0.5; }
      .choix_paiements .flex .carte div, #info_bancontact .flex .carte div {
        cursor: pointer;
        border: 1px solid var(--club-fond, #ffffff);
        border-radius: 8px;
        background-color: var(--club-fond, #ffffff);
        display: block;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 64%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: 100% 100%; }
      .choix_paiements .flex .carte:hover, .choix_paiements .flex .carte:focus, #info_bancontact .flex .carte:hover, #info_bancontact .flex .carte:focus {
        opacity: 1; }
    .choix_paiements .flex #paiement_bancontact div, #info_bancontact .flex #paiement_bancontact div {
      background-image: url("../img/paiement_bancontact.png"); }
    .choix_paiements .flex #paiement_mastercard div, #info_bancontact .flex #paiement_mastercard div {
      background-image: url("../img/paiement_mastercard.png"); }
    .choix_paiements .flex #paiement_visa div, #info_bancontact .flex #paiement_visa div {
      background-image: url("../img/paiement_visa.png"); }
    .choix_paiements .flex #paiement_americanexpress div, #info_bancontact .flex #paiement_americanexpress div {
      background-image: url("../img/paiement_americanexpress.png"); }
    .choix_paiements .flex input, #info_bancontact .flex input {
      cursor: pointer;
      z-index: 8;
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0; }

/* ==================== FOOTER ==================== */
/*  Le pied de l'accueil flotte au-dessus de la photo du club.
 *
 *  Sa couleur ne peut donc pas se déduire d'un fond connu : la photo
 *  est celle que le club a déposée, claire ou sombre, unie ou
 *  chargée. Il portait pourtant l'encre douce des pages ordinaires,
 *  faite pour du blanc, à quatre-vingts pour cent d'opacité et dix
 *  pixels et demi. Mesuré au navigateur sur le fond de la
 *  démonstration : 2,77 pour un, là où le texte courant en demande
 *  4,5. Le copyright, les conditions générales et la mention de
 *  l'éditeur étaient donc à la limite du lisible sur la seule page
 *  que voit un visiteur qui ne connaît pas le club.
 *
 *  Le pied reçoit le voile et l'encre du pied de colonne, qui sont
 *  faits l'un pour l'autre : le voile garantit un fond sombre quelle
 *  que soit la photo, et l'encre claire s'y détache. L'opacité
 *  générale disparaît, elle diluait le texte en même temps que le
 *  voile.
 *
 *  Le voile est à quatre-vingt-deux pour cent, et non à
 *  soixante-quatorze : le pire cas est une photo blanche, où le
 *  voile se compose à rgb(71,71,71) et l'encre claire y tient 5,9
 *  pour un. À soixante-quatorze pour cent, ce même pire cas tombait
 *  à 4,45, sous le seuil. Un club dépose la photo qu'il veut ; le
 *  pied doit se lire sur toutes.                                   */
#page__en_construction footer,
#page_accueil footer {
  position: absolute;
  width: 500px;
  right: 0;
  left: inherit;
  opacity: 1;
  background: rgba(0, 0, 0, 0.82);
  background-color: rgba(0, 0, 0, 0.82);
  border-right: none;
  border-radius: 0;
  padding: 12px 18px 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
  #page__en_construction footer a, #page__en_construction footer p, #page__en_construction footer b, #page__en_construction footer span,
  #page_accueil footer a,
  #page_accueil footer p,
  #page_accueil footer b,
  #page_accueil footer span {
    color: #fff !important; }
  #page__en_construction footer a:hover, #page__en_construction footer a:focus,
  #page_accueil footer a:hover,
  #page_accueil footer a:focus {
    color: var(--club-rail-fort, #fff) !important; }

footer {
  z-index: 999999999;
  width: 350px;
  margin: 0;
  padding: 15px 0 10px;
  display: block;
  position: fixed;
  left: 0;
  opacity: 1;
  bottom: 0;
  /* « Fond du pied de page », même histoire que l'en-tête. */
  background-color: var(--club-pied, #fff);
  border-right: 1px solid var(--club-ligne, #e2e2e2); }
  footer a:hover, footer a:focus {
    color: var(--club-principale, #39449f) !important; }
  footer a, footer p {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--club-texte-doux, #787a86) !important;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }

/* ======================================================================== */
/*  							Media Queries								 */
/* ======================================================================== */
@media (max-width: 1280px) {
  .home_texte .salut_accueil {
    font-size: 50px; }

  .home_texte h1 {
    font-size: 70px; }

  #page__en_construction header, #page_accueil header, .container_home {
    margin: 0 0 0 calc(100% - 350px);
    width: 350px; }

  #page_accueil footer, #page__en_construction footer {
    width: 350px; }

  .flex_gallerie > div {
    width: 32%;
    padding-top: 25%; } }
@media (max-width: 1080px) {
  form, .container {
    max-width: 800px; }

  .list_produits li {
    width: 33.33%; }

  footer, header.left_header {
    width: 300px; }

  #page_accueil header, #page__en_construction header, .container_home {
    width: 350px;
    margin: 0 auto; }

  .container {
    width: calc(100% - 350px);
    margin: 25px 25px 25px 325px; }

  .list_produits li {
    width: 50%; }

  form fieldset.fieldset_checkbox.fieldset_checkbox_inline div {
    width: auto;
    text-align: left;
    position: relative;
    background: #FFF;
    padding: 5px 0px 5px 30px;
    margin: 5px 10px; }

  form fieldset.fieldset_checkbox.fieldset_checkbox_inline div input {
    top: 6px;
    left: 8px; }

  form fieldset.fieldset_checkbox.fieldset_checkbox_inline div label {
    width: 100%; }

  input, select, button, form fieldset {
    width: 100%; }

  input, select {
    margin-bottom: 5px; }

  .bloc_text .div_flex {
    flex-wrap: wrap; }
    .bloc_text .div_flex .mid_flex {
      width: 100%;
      padding: 15px 0 !important; }
    .bloc_text .div_flex .tiers_flex {
      width: 100%;
      padding: 5px 0 !important; }

  .home_texte {
    padding-left: 25px; }

  #page_accueil header, #page__en_construction header, .container_home {
    margin: 0 0 0 calc(100% - 350px);
    width: 350px; } }
@media (max-width: 1000px) {
  .flex_gallerie > div {
    width: 48%;
    padding-top: 35%; }

  #btn_accueil_decouvrir, #btn_accueil_equipe, #btn_accueil_horairestarifs {
    display: table;
    margin-left: 0 !important;
    width: auto; } }
@media (max-width: 850px) {
  .list_produits li a {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px; }

  .container_home {
    margin: 0 auto;
    width: 350px;
    align-items: baseline;
    padding-top: 24px;
    padding-bottom: 100px; }

  #form_connexion h2 {
    display: none; }

  .home_texte {
    padding-left: 0;
    z-index: 9;
    text-align: center;
    align-items: baseline;
    width: 100%;
    min-height: auto;
    padding: 16px 20px 0; }

  .home_texte h1, .home_texte .salut_accueil {
    display: none; }

  .home_texte .btn {
    background-color: var(--club-principale, #39449f);
    color: var(--club-fond, #ffffff); }

  #page_accueil header {
    width: 100%;
    text-align: center; }

  #page_accueil header .logo_club {
    float: none;
    width: 160px; }

  #page__en_construction header {
    width: 100%;
    text-align: center; }

  #page__en_construction header .logo_club {
    float: none;
    width: 160px; }

  /* Le pied de l'accueil ne disparaît plus sur téléphone.
   *
   *  « display: none » l'effaçait entièrement sous 850 pixels. Sur
   *  la page qui porte le formulaire de connexion, c'est-à-dire la
   *  plus visitée d'un site de club, le visiteur mobile perdait
   *  donc les conditions générales, la confidentialité, les témoins
   *  de connexion, le numéro d'entreprise et la ligne de contact du
   *  club. Ce sont des informations obligatoires, et le moyen
   *  d'écrire au club.
   *
   *  Il n'a plus à flotter : sous cette largeur il n'y a plus de
   *  colonne à préserver. Il passe donc dans le flux, sous le
   *  formulaire, avec le voile qui garantit son contraste sur la
   *  photo du club — le même qu'en grand écran.               */
  #page_accueil footer, #page__en_construction footer {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 20px 16px;
    max-height: none; }

  /* Empilés plutôt que séparés par des barres verticales : quatre
      liens légaux et une mention d'éditeur sur une seule ligne de
      trois cent vingt pixels se coupent n'importe où.            */
  #page_accueil footer .separate,
  #page__en_construction footer .separate {
    display: none; }

  #page_accueil footer p, #page__en_construction footer p {
    line-height: 2; }

  /* La page cesse d'être verrouillée : sans cela, le pied remis
      dans le flux serait sous une coupure qu'aucun geste
      n'atteint.                                                  */
  #page_accueil, #page__en_construction {
    height: auto;
    min-height: 100vh;
    overflow-y: auto; }

  #btn_accueil_decouvrir {
    display: block; }

  #btn_accueil_equipe, #btn_accueil_horairestarifs, #page_accueil .home_texte .accroche_accueil, #page__en_construction .home_texte .accroche_accueil {
    display: none; } }
@media (max-width: 800px) {
  header.left_header {
    padding-top: 25px;
    opacity: 0.9;
    padding-bottom: 15px; }

  body:not(#page_accueil):not(#page__en_construction) header.left_header {
    height: auto; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu {
      max-height: none;
      padding-bottom: 0; }

 		/* Sur un petit écran, la colonne devenait une pile d'entrées
 		   plus haute que l'écran, coupée à mi-liste par un défilement
 		   interne invisible : le contenu n'arrivait qu'après. Le menu
 		   se replie derrière son bouton, et se déplie entier.

 		   Le sélecteur reprend celui de la pile de la colonne, dont les
 		   deux identifiants pèsent plus lourd que toute classe : sans
 		   ce poids, son « display: flex » gagnait et rien ne se
 		   repliait. */
  header.left_header .menu_mobile {
    display: block; }

  body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne {
    display: none; }

  body:not(#page_accueil):not(#page__en_construction) header.left_header.menu_ouvert .menu_colonne {
    display: block; }

  footer, header.left_header {
    width: calc(100% - 100px);
    margin: 50px;
    position: relative;
    display: block;
    min-height: auto; }

  footer {
    background-color: white;
    padding: 25px;
    opacity: 0.8; }

  header.left_header .logo_club {
    margin: 0 auto; }

  .container {
    width: calc(100% - 100px);
    max-width: none;
    margin: 50px; }

  .container_home {
    margin: 0 auto;
    width: 350px;
    align-items: baseline;
    padding-top: 24px;
    padding-bottom: 100px; }

  form.form_flex input, form.form_flex select {
    margin-bottom: 5px; }

  form.form_flex.form_flex2 input, form.form_flex.form_flex2 select, form.form_flex.form_flex2 button,
  form.form_flex input, form.form_flex select, form.form_flex button {
    width: 100%; } }
@media (max-width: 600px) {
  .flex_gallerie > div {
    width: 98%;
    padding-top: 40%; }

  footer, header.left_header {
    width: calc(100% - 30px);
    margin: 15px; }

  footer {
    padding: 10px; }

  .container {
    width: calc(100% - 30px);
    margin: 15px; }

  .container_home {
    margin: 0 auto;
    width: 350px;
    align-items: baseline;
    padding-top: 24px;
    padding-bottom: 100px; }

  .datepicker-container, .datepickers-container {
    margin-top: -30px; }

  .img_max.border_img {
    display: none; } }
@media (max-width: 479px) {
  .list_produits li {
    width: 100%; }

  /* Le panneau de connexion gardait une largeur ferme de 350 pixels
     jusqu'au plus petit écran : sur un téléphone de 320, il
     élargissait la fenêtre de mise en page, et la page devenait plus
     large que l'appareil sans paraître défilable. */
  #page_accueil header, #page__en_construction header, .container_home {
    width: 100%;
    max-width: 350px; }

  /* Son enfant refusait de se réduire : la largeur minimale d'un
     élément flexible vaut « auto », donc celle de son contenu. */
  .container_home > .home_verticalalign {
    min-width: 0;
    width: 100%; } }
/* ======================================================================== */
/*                          La barre de tri                                 */
/* ======================================================================== */
/*  Les critères de tri prenaient la classe des boutons d'action, large de
    la moitié de l'écran et posée en bloc : cinq critères faisaient cinq
    bandes empilées. Ce sont des pastilles, alignées sur une ligne, et le
    critère retenu se distingue par son remplissage.                        */
.barre_tri {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Alignée sur la lecture, comme le titre et les listes : le
     centrage la détachait de ce qu'elle trie. */
  justify-content: flex-start;
  gap: 8px; }
  .barre_tri .aide_reglage {
    margin: 0; }

/*  La pastille d'un critère, de tri ou de filtre : elle vivait sous la
    barre de tri seule, et les filtres qui la reprenaient restaient nus.  */
.lien_tri {
  display: inline-block;
  padding: 5px 14px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--club-principale, #39449f);
  border-radius: var(--club-arrondi, 4px);
  color: var(--club-principale, #39449f);
  background-color: var(--club-fond, #fff);
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .lien_tri:hover, .lien_tri:focus {
    background-color: var(--club-principale-claire, #efb7b8); }
  .lien_tri.actif {
    color: #fff;
    color: var(--club-bouton-texte, #fff);
    background-color: var(--club-principale, #39449f); }
    .lien_tri.actif:hover, .lien_tri.actif:focus {
      background-color: var(--club-principale-fonce, #881f20); }

/* ======================================================================== */
/*                       La liste des membres                               */
/* ======================================================================== */
/*  Chaque ligne était centrée, précédée d'un point sans légende et suivie
    d'un nombre sans unité. Quarante lignes identiques, impossibles à
    parcourir de l'oeil. Le nom part à gauche, le décompte à droite, et
    l'état se lit à la couleur, dont la légende est donnée au-dessus.       */
.ligne_membre {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  /* Le passage en flex fait une ligne un peu plus haute qu'un simple
     titre : le retrait latéral et l'interligne la resserrent autant
     qu'il est possible sans rogner le texte. */
  padding: 6px 20px;
  line-height: 19px;
  /* Le titre est centré par défaut, et la règle générale compose
     tout span en exergue serif italique : les noms reprennent
     l'alignement, la fonte et le droit. */
  /* Le nom et les coordonnées, dans une même colonne qui prend la
     place restante : le nom sur sa ligne, ce qui sert à joindre le
     membre dessous, en plus petit. */
  	/* En bloc, et non en flex.
  
  	   Sur trois cent vingt pixels, un courriel de trente caractères ne
  	   tient pas. En flex, « max-width: 100% » sur le lien ne borne
  	   rien : la largeur du conteneur n'est pas définie pendant le
  	   calcul intrinsèque, et le pourcentage retombe à « aucune
  	   borne ». Le lien refusait donc de rétrécir et poussait la page de
  	   dix-neuf pixels vers la droite.
  
  	   Dans un bloc, la largeur est définie, le pourcentage s'applique,
  	   et le lien se coupe par des points de suspension. Les deux liens
  	   restent côte à côte tant qu'ils tiennent, et passent à la ligne
  	   sinon : c'est ce que fait « inline-block ». */
  /* Sur une ligne claire, l'état se dit par un liseré, pas en
     peignant toute la ligne : quarante fonds sombres faisaient un
     mur, et le texte y perdait son contraste. */ }
  .ligne_membre span {
    font-family: inherit;
    font-style: normal;
    margin: 0;
    text-align: left; }
  .ligne_membre .identite_membre {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px; }
  .ligne_membre .nom_membre {
    font-weight: 600; }
  .ligne_membre .joindre_membre {
    display: block;
    font-size: 10.5px;
    min-width: 0;
    max-width: 100%; }
    .ligne_membre .joindre_membre a {
      display: inline-block;
      font-size: 10.5px;
      max-width: 100%;
      margin-right: 12px;
      vertical-align: bottom;
      color: var(--club-texte-doux, #787a86);
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .ligne_membre .joindre_membre a:last-child {
        margin-right: 0; }
      .ligne_membre .joindre_membre a:hover, .ligne_membre .joindre_membre a:focus {
        color: var(--club-principale, #39449f);
        text-decoration: underline; }
  .ligne_membre .compte_seances {
    font-size: 11.5px;
    color: var(--club-texte-doux, #787a86);
    white-space: nowrap; }
  .ligne_membre .compte_abo {
    display: inline-block;
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom; }
  .ligne_membre .compte_abo_sans {
    color: var(--club-texte-doux, #787a86);
    font-style: italic; }
  .ligne_membre .compte_credits {
    margin-left: 8px; }
  /*  Ce qui reste dû, sur la ligne du membre. Le club cherchait ce
      renseignement dans l'écran des finances, commande par commande.
      Rouge parce qu'il appelle un geste ; rien du tout quand le membre
      est en ordre, plutôt qu'une pastille verte sur quarante lignes.  */
  .ligne_membre .compte_impaye {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
    color: #8c2f24;
    background: #fbeae7;
    border: 1px solid #efc9c2; }
  .ligne_membre .compte_impaye_attente {
    color: #7a5a12;
    background: #fbf3e0;
    border-color: #ecd9a8; }
  .ligne_membre.membre_eloigne {
    box-shadow: inset 4px 0 0 #d9a13b; }
  .ligne_membre.membre_lointain {
    box-shadow: inset 4px 0 0 #e07b2e; }
  .ligne_membre.membre_perdu {
    box-shadow: inset 4px 0 0 #d64545; }
  .ligne_membre.membre_jamais {
    box-shadow: inset 4px 0 0 #9a9aa2; }

/*  La pastille des frais d'inscription : pleine quand ils sont réglés,
    creuse sinon. Elle gardait la même place dans les deux cas, faute de
    quoi les noms ne s'alignaient plus d'une ligne à l'autre.               */
.pastille_ordre {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background-color: #2f9e44;
  border: 1px solid rgba(31, 31, 31, 0.2); }
  .pastille_ordre.pastille_creuse {
    background-color: transparent; }

/*  Le visage d'un membre, en vignette de vingt-cinq pixels : la hauteur
    d'une ligne de la liste, pas davantage. Une vignette plus grande
    doublerait la longueur d'une liste de deux cents noms, et c'est la
    liste qu'on parcourt, pas les portraits.

    Sans photo, les initiales dans le même rond : la colonne garde sa
    largeur et les noms restent alignés d'une ligne à l'autre.             */
.vignette_membre {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  /* Bornée en hauteur comme en largeur : une photo de portrait est
     trois fois plus haute que large, et une règle de gabarit qui
     rendrait la hauteur automatique la laisserait s'étirer sur
     soixante-quinze pixels, ligne par ligne. */
  max-height: 25px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--club-neutre-fond, #f0f1f4);
  border: 1px solid var(--club-ligne, #e2e2e2); }

.vignette_lettres {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--club-texte-doux, #787a86); }

.legende_membres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  	/* UNE BARRETTE, ET NON UN CARRÉ.
  
  	   Le témoin faisait quatorze pixels de côté, coins légèrement
  	   arrondis, trait gris : celui des membres assidus, blanc, était
  	   exactement une case à cocher NON COCHÉE — dans une liste où les
  	   suivantes étaient pleines, on croyait pouvoir filtrer en cliquant.
  	   Une barrette allongée ne ressemble à aucune commande. */ }
  .legende_membres li {
    display: flex;
    align-items: center;
    gap: 6px; }
  .legende_membres .temoin {
    display: inline-block;
    width: 24px;
    height: 9px;
    border-radius: 999px;
    /* Le témoin blanc des assidus disparaissait sur la carte
       blanche : son trait le dessine, quel que soit le fond. */
    border: 1px solid rgba(1, 1, 1, 0.35); }
  .legende_membres .membre_assidu {
    background-color: var(--club-fond, #fff); }
  .legende_membres .membre_eloigne {
    background-color: #d9a13b; }
  .legende_membres .membre_lointain {
    background-color: #e07b2e; }
  .legende_membres .membre_perdu {
    background-color: #d64545; }
  .legende_membres .membre_jamais {
    background-color: #9a9aa2; }

/* ======================================================================== */
/*                             Les tableaux                                 */
/* ======================================================================== */
/*  Les tableaux de l'application n'avaient que le remplissage hérité de
    la balise : pas d'en-tête distingué, pas de trait entre les lignes,
    des chiffres en police à chasse variable qui ne s'alignaient pas.       */
.tableau_admin, .table_seance {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  	/* Les tailles et les espacements sont écrits ICI, et une seule fois.
  
  	   Le même sélecteur était repris plus bas, dans la section des
  	   tableaux, avec d'autres valeurs pour les mêmes propriétés : les
  	   quatre déclarations de ce bloc étaient donc mortes, et lire
  	   celui-ci ne disait pas ce que le tableau fait. Les valeurs qui
  	   l'emportaient sont celles-ci. */
  /* Une ligne sur deux prend le fond de page : sur vingt lignes,
     l'œil suit la sienne jusqu'au bout. */ }
  .tableau_admin th, .table_seance th {
    text-align: left;
    /* Douze pixels : ces intitulés sont en capitales, espacés, et
       ce sont eux qui disent ce que porte chaque colonne. */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--club-texte-doux, #787a86);
    padding: 7px 10px;
    border-bottom: 2px solid var(--club-ligne, #e2e2e2); }
  .tableau_admin td, .table_seance td {
    padding: 7px 10px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--club-ligne, #e2e2e2);
    line-height: 1.4; }
  .tableau_admin tbody tr:nth-child(even) td, .table_seance tbody tr:nth-child(even) td {
    background-color: var(--club-surface-page, #f2f2f2); }
  .tableau_admin tbody tr:hover td, .table_seance tbody tr:hover td {
    background-color: var(--club-principale-claire, #efb7b8); }
  .tableau_admin tbody tr:hover td, .table_seance tbody tr:hover td {
    background-color: var(--club-surface-page, #f2f2f2); }
  .tableau_admin tr:last-child td, .table_seance tr:last-child td {
    border-bottom: none; }

/* ======================================================================== */
/*                     La barre d'outils d'une liste                        */
/* ======================================================================== */
/*  La recherche, les filtres et le tri vivaient chacun dans son panneau
    gris : trois étages avant la première donnée. Ils partagent une
    barre, qui s'empile d'elle-même sur un petit écran.                     */
.barre_outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px; }
  .barre_outils form.form_flex {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin: 0; }
  .barre_outils .barre_tri {
    justify-content: flex-start; }

/*  Les filtres d'affichage d'une liste : des pastilles, comme le tri,
    et non trois boutons d'action pleins qui se disputaient l'écran.      */
.filtres_liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; }

/* ======================================================================== */
/*                     La recherche en tête de liste                        */
/* ======================================================================== */
/*  Le champ gris et le bouton qui occupait le tiers restant se lisaient
    comme deux objets sans rapport. Le champ s'étire, le bouton prend la
    place de son mot.                                                       */
form.form_flex {
  gap: 8px;
  align-items: flex-end;
  /* L'enveloppe d'une liste avec recherche prend la place de la liste
     qu'elle remplace : c'est elle, désormais, l'élément de flex, et le
     champ occupe toute sa largeur. Sans cela le champ gardait la
     largeur d'un contrôle du formulaire tandis que l'enveloppe prenait
     la ligne entière, et la liste des propositions, qui s'aligne sur
     l'enveloppe, était trois fois plus large que le champ. */ }
  form.form_flex input, form.form_flex select {
    flex: 1 1 180px;
    width: auto;
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px); }
    form.form_flex input:focus, form.form_flex select:focus {
      border-color: var(--club-principale, #39449f); }
  form.form_flex button {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    border-radius: var(--club-arrondi, 4px); }
  form.form_flex .choix {
    flex: 1 1 180px;
    width: auto; }
  form.form_flex .choix > input {
    flex: 1 1 auto;
    width: 100%; }
  form.form_flex.form_flex2 input, form.form_flex.form_flex2 select, form.form_flex.form_flex2 button {
    width: auto; }
  form.form_flex.form_flex2 .choix > input {
    width: 100%; }

/* ======================================================================== */
/*                    Le calendrier, aux couleurs du club                   */
/* ======================================================================== */
/*  La bibliothèque de calendrier arrive avec son orange et son bleu
    ciel : deux couleurs qui n'appartiennent à aucun club. Sa feuille se
    charge après celle du produit, d'où le sélecteur appuyé par le
    conteneur, qui pèse plus lourd sans « !important ».                     */
.datepickers-container .datepicker--day-name {
  color: var(--club-principale, #39449f); }

.datepickers-container .datepicker--cell.-current- {
  color: var(--club-principale, #39449f); }

.datepickers-container .datepicker--cell.-selected-,
.datepickers-container .datepicker--cell.-selected-.-current- {
  color: #fff;
  background: var(--club-principale, #39449f); }

.datepickers-container .datepicker--cell.-selected-.-focus- {
  background: var(--club-principale-fonce, #881f20); }

.datepickers-container .datepicker--cell.-in-range- {
  color: var(--club-texte, #161a2e);
  background: var(--club-principale-claire, #efb7b8); }

.datepickers-container .datepicker--button {
  color: var(--club-principale, #39449f); }

/*  Les deux dernières couleurs venues de la bibliothèque. « datepicker.min.css »
    n'est pas édité : c'est un fichier tiers, et une mise à jour écraserait la
    correction. Les surcharges vivent donc ici, et reprennent le sélecteur appuyé
    des règles ci-dessus : la feuille de la bibliothèque est chargée APRÈS
    style.css, à spécificité égale c'est elle qui l'emporte, et la classe du
    conteneur est ce qui fait pencher la balance.

    Les jours du mois voisin sortaient en #dedede sur blanc, soit 1,35 pour un,
    et ce sont des dates cliquables : main.js pose « selectOtherMonths ». L'année,
    dans l'en-tête du calendrier, sortait en #9c9c9c, soit 2,75 pour un.          */
.datepickers-container .datepicker--cell-day.-other-month-,
.datepickers-container .datepicker--cell-year.-other-decade- {
  color: var(--club-texte-doux, #787a86); }

.datepickers-container .datepicker--cell-day.-other-month-:hover,
.datepickers-container .datepicker--cell-year.-other-decade-:hover {
  color: var(--club-texte, #161a2e); }

.datepickers-container .datepicker--nav-title i {
  color: var(--club-texte-doux, #787a86); }

/* ======================================================================== */
/*                        Les jalons de semaine                             */
/* ======================================================================== */
/*  « Semaine n°36 : 79/102 » était un paragraphe gras comme un autre :
    un jalon de groupe se distingue des lignes qu'il chapeaute.             */
p[id^="week_"] {
  margin: 26px 0 8px; }
  p[id^="week_"] b {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--club-texte-doux, #787a86); }

/* ======================================================================== */
/*                       La liste des documents                             */
/* ======================================================================== */
/*  Trois documents s'empilaient en boutons d'action centrés : une liste
    de fichiers se lit ligne à ligne, et chaque ligne dit son format.       */
.liste_documents {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-width: 560px; }
  .liste_documents li {
    margin-bottom: 8px; }
  .liste_documents a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-weight: 500;
    color: var(--club-texte, #161a2e);
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .liste_documents a:hover, .liste_documents a:focus {
      border-color: var(--club-principale, #39449f);
      color: var(--club-principale, #39449f); }
    .liste_documents a small {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--club-texte-doux, #6b6e7b); }

/* ======================================================================== */
/*                  L'accroche du bandeau d'accueil                         */
/* ======================================================================== */
/*  Elle était réglée par un attribut style écrit dans l'écran : la
    feuille de style est l'endroit des règles.                              */
.accroche_accueil {
  color: #fff;
  font-weight: 700;
  margin-top: 15px;
  margin-left: 7px; }

/* ======================================================================== */
/*                   Les deux colonnes de « Mon solde »                     */
/* ======================================================================== */
/*  L'illustration et les lots de séances étaient collés par des attributs
    style : ils s'empilent d'eux-mêmes quand la place manque.               */
.colonnes_solde {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: flex-start; }
  .colonnes_solde .illustration_solde {
    flex: 0 1 300px;
    min-width: 220px; }
    .colonnes_solde .illustration_solde img {
      margin-bottom: 0; }
  .colonnes_solde .choix_solde {
    flex: 1 1 300px; }

@media (max-width: 700px) {
  .colonnes_solde .illustration_solde {
    display: none; } }
/* ======================================================================== */
/*                       La liste des paiements                             */
/* ======================================================================== */
/*  La nature de la vente était peinte en rose pâle sur carte blanche,
    sous le seuil de lisibilité, et la date arrivait telle que la base la
    range, secondes comprises.                                              */
.ligne_paiement {
  /* Une grille plutôt qu'une boîte flexible : les quatre colonnes
     d'une ligne à l'autre partagent leurs bornes, ce qui est tout le
     propos d'une liste. En flexible, chaque ligne se répartissait
     pour elle-même et le nom du membre commençait ailleurs à chaque
     fois. */
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 110px 168px;
  align-items: center;
  gap: 10px;
  text-align: left;
  /* La règle générale compose tout span en exergue serif italique
     centré : le nom du client reprend l'alignement, la fonte et le
     droit, comme sur la ligne d'un membre. */
  /* La catégorie était écrite dans la couleur du lien alors qu'elle
     ne mène nulle part : elle est devenue une pastille, teintée
     d'après son nom. La largeur est fixée pour que les noms des
     membres s'alignent d'une ligne à l'autre : sans elle, « E-shop »
     et « Carte de 10 séances » décalaient chaque ligne. */
  /* La catégorie était écrite dans la couleur du lien alors qu'elle
     ne mène nulle part : elle est devenue une pastille, teintée
     d'après son nom. Elle prend la largeur de son texte ; c'est sa
     colonne qui est fixe. */
  /* Le moyen, à côté de la date : c'est la question du rapprochement
     bancaire, et elle se posait en dépliant chaque ligne. */ }
  .ligne_paiement span {
    display: inline;
    font-family: inherit;
    font-style: normal;
    margin: 0;
    text-align: left; }
  .ligne_paiement .puce {
    justify-self: start; }
  .ligne_paiement .nom_paiement {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .ligne_paiement .montant_paiement {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .ligne_paiement .date_paiement {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 12px;
    color: var(--club-texte-doux, #6b6e7b);
    text-align: right;
    white-space: nowrap; }
  .ligne_paiement .moyen_paiement {
    font-size: 12px;
    color: var(--club-texte-doux, #6b6e7b);
    white-space: nowrap; }

/*  Sur un téléphone, les quatre colonnes n'ont pas la place : le nom
    passe en tête sur sa propre ligne, la catégorie, le montant et la
    date se partagent celle du dessous.                                    */
@media (max-width: 760px) {
  .ligne_paiement {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 3px;
    align-items: baseline; }

  .ligne_paiement .nom_paiement {
    grid-column: 1 / -1;
    order: -1;
    font-weight: 600; }

  .ligne_paiement .montant_paiement {
    text-align: right; }

  .ligne_paiement .date_paiement {
    grid-column: 1 / -1;
    text-align: left; }

  .ligne_paiement .moyen_paiement {
    grid-column: 1 / -1;
    text-align: left; } }
/*  RIEN N'EST ÉCRIT PLUS PETIT QUE QUATORZE PIXELS SUR UN TÉLÉPHONE.

    La ligne d'un paiement empile quatre valeurs — catégorie, nom, montant,
    date — dont trois sont écrites en douze pixels, et la ligne elle-même
    tombe à douze et demi sous 600 px. Mesurée à 390 px, largeur d'un
    téléphone courant, la date descendait sous huit pixels une fois la
    grille resserrée : illisible, sur l'écran que le trésorier ouvre au
    bord du tatami.

    Quatorze est le plancher que le produit se donne pour du texte lu, et
    la ligne s'aère plutôt que de rétrécir : sur un téléphone, la hauteur
    ne coûte rien, la lisibilité si.                                       */
@media (max-width: 600px) {
  .ligne_paiement {
    font-size: 14px;
    row-gap: 5px;
    padding-top: 12px;
    padding-bottom: 12px; }

  .ligne_paiement .date_paiement,
  .ligne_paiement .moyen_paiement,
  .ligne_paiement .montant_paiement,
  .ligne_paiement .nom_paiement,
  .ligne_paiement .puce {
    font-size: 14px; } }
/*  Les totaux de l'année : une grille de douze mois, à chiffres alignés,
    au lieu d'un formulaire détourné en tableau.                            */
.totaux_mois {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 22px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none; }
  .totaux_mois li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid var(--club-ligne, #e2e2e2); }
    .totaux_mois li b {
      font-variant-numeric: tabular-nums;
      font-weight: 600; }
    .totaux_mois li span {
      color: var(--club-texte-doux, #6b6e7b); }

.totaux_entete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin-bottom: 6px; }
  .totaux_entete p {
    margin: 0; }

/*  Les liens vers les années passées : des renvois discrets, plus des
    barres pleines qui pesaient autant que l'action principale.             */
.liens_annees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px; }

/* ======================================================================== */
/*                    La direction « Atelier »                              */
/* ======================================================================== */
/*  L'espace membre était une pile de panneaux clairs sur fond clair : la
    colonne de navigation, les cartes et la page avaient le même blanc, et
    rien ne disait où finissait l'outil et où commençait la donnée. Une
    liste de séances tenait cinq lignes à l'écran.

    La direction retenue tient en quatre gestes : une colonne sombre qui
    encadre le travail, une barre qui dit toujours où l'on se trouve, des
    lignes resserrées, et des chiffres en chasse fixe qui s'alignent d'une
    ligne à l'autre.

    Ce bloc vient après les autres : il tranche les conflits de cascade
    sans « !important », par sa seule position dans la feuille.            */
/* ---------------------------------------------------------------------- */
/*  1. La colonne                                                          */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction) {
  /* Le pied de colonne ferme le rail : il en partage le fond, sinon
     un rectangle blanc flottait au bas d'une colonne sombre. */
  /* La liste des entrées. Elle portait un fond blanc à elle, qui
     découpait un rectangle clair dans la colonne. */
  /* Le lien vers les événements, quand il y en a : un contour sur la
     colonne, pas un second aplat qui disputerait la place au bouton de
     réservation. Il vit hors de la liste des entrées, dans l'en-tête
     même de la colonne. */
  /* L'action principale reste en place pendant que la liste défile.
     La liste s'amène d'elle-même sur l'entrée ouverte : quand cette
     entrée est basse, « Argent » ou « Étiquettes et champs », le
     défilement emportait le bouton « Réserver » hors de vue, et la
     colonne ne montrait plus que la barre bleue de son bord. Le geste
     quotidien du produit disparaissait selon l'écran ouvert. */
  /* Le sélecteur reprend « header.left_header » : la règle qu'il
     remplace le porte, et sans lui elle pesait plus lourd. La réserve
     restait celle écrite à la main, mesurée mais jamais appliquée. */
  /* Le bouton qui déplie la colonne sur un petit écran : il vit dans
     la colonne, il en prend les couleurs. */
  /* Le contenu suit la nouvelle largeur de colonne. */ }
  body:not(#page_accueil):not(#page__en_construction) header.left_header {
    width: 248px;
    padding-top: 16px;
    padding-bottom: 0;
    background: var(--club-rail, #1f1f1f);
    border-right: 1px solid var(--club-rail-trait, #4c4c4c);
    /* Le logo du club sur une plaque claire. Un logo sombre sur
       fond transparent disparaissait dans la colonne sombre, et
       le produit ne peut pas savoir de quelle couleur est le
       fichier que le club dépose. */
    /* Le nom du club sous le logo : un repère, pas une enseigne. */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club {
      width: calc(100% - 32px);
      max-width: none;
      margin: 0 16px 10px;
      padding: 8px 10px;
      background-color: var(--club-fond, #fff);
      border-radius: var(--club-arrondi, 4px); }
      body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club a {
        color: var(--club-texte, #161a2e); }
      body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club img {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_discover {
      background: transparent;
      color: var(--club-rail-texte, #cecece);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.35;
      /* Vingt-neuf pixels de haut : un pixel sous la prise d'un
         doigt, pour un lien qui mène à la page du club. La règle
         de la colonne pose « padding-top: 0 » en important : la
         hauteur se donne donc en minimum, non en remplissage. */
      padding: 0 16px 14px;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 !important; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_discover:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_discover:focus {
        background: transparent;
        color: var(--club-rail-fort, #fff); }
  body:not(#page_accueil):not(#page__en_construction) footer {
    width: 248px;
    background-color: var(--club-rail, #1f1f1f);
    border-right: 1px solid var(--club-rail-trait, #4c4c4c);
    border-top: 1px solid var(--club-rail-trait, #4c4c4c);
    padding: 12px 16px;
    opacity: 1;
    		/* Dix pixels et demi dans la nuance la plus douce de la colonne :
    		   4,53 pour un pour l'adresse du club, les mentions légales et le
    		   lien de déconnexion, soit un centième au-dessus du seuil. La
    		   marge était nulle, et « --club-rail-doux » se déduit à 0,46 de
    		   la couleur de la colonne : sur une colonne d'un ton moyen, un
    		   beige ou un gris de marque, il tombe à 2,6 et le pied devient
    		   illisible sans que rien ne le signale.
    
    		   Le pied prend donc la nuance de texte de la colonne, celle des
    		   entrées du menu : 10,47 pour un. Il reste discret par sa
    		   taille, non par un gris qui s'efface. La taille, elle, ne
    		   bouge pas : mesurée, elle coûte cinquante-deux pixels de
    		   colonne par pixel de police, l'adresse et la liste de liens
    		   passant à la ligne, et c'est autant de menu en moins. */
    /* Un club dont l'adresse tient sur dix lignes ne doit pas
       pousser la colonne entière : le pied défile en lui-même. */
    max-height: 34vh;
    overflow-y: auto; }
    body:not(#page_accueil):not(#page__en_construction) footer p, body:not(#page_accueil):not(#page__en_construction) footer a {
      text-align: center !important; }
    body:not(#page_accueil):not(#page__en_construction) footer p {
      color: var(--club-rail-texte, #cecece) !important;
      font-size: 10.5px;
      line-height: 1.45; }
    body:not(#page_accueil):not(#page__en_construction) footer p b {
      font-size: 11.5px !important;
      padding-bottom: 6px !important; }
    body:not(#page_accueil):not(#page__en_construction) footer a {
      color: var(--club-rail-texte, #cecece) !important;
      font-size: 10.5px; }
    body:not(#page_accueil):not(#page__en_construction) footer a:hover, body:not(#page_accueil):not(#page__en_construction) footer a:focus {
      color: var(--club-rail-fort, #fff) !important; }
  body:not(#page_accueil):not(#page__en_construction) .sous_menu {
    background-color: transparent;
    		/* Le bouton de réservation garde sa couleur pleine : c'est le
    		   seul aplat d'accent de la colonne.
    
    		   La couleur du texte est posée sur l'élément lui-même, et non
    		   sur un « a » descendant : « btn_reserver » EST le lien, la
    		   règle qui visait son enfant ne touchait donc rien, et le
    		   bouton héritait de la couleur des entrées du menu. Sur une
    		   colonne sombre, cette couleur est presque blanche et la
    		   panne ne se voyait pas ; sur une colonne claire, l'action
    		   principale du produit s'écrivait en gris foncé sur bleu
    		   marine. */ }
    body:not(#page_accueil):not(#page__en_construction) .sous_menu li a {
      padding: 7px 16px;
      font-size: 13.5px;
      font-weight: 400;
      color: var(--club-rail-texte, #cecece); }
      body:not(#page_accueil):not(#page__en_construction) .sous_menu li a:after {
        color: var(--club-rail-accent, #8d93c1); }
      body:not(#page_accueil):not(#page__en_construction) .sous_menu li a:hover, body:not(#page_accueil):not(#page__en_construction) .sous_menu li a:focus {
        background-color: var(--club-rail-actif, #353535);
        color: var(--club-rail-fort, #fff); }
        body:not(#page_accueil):not(#page__en_construction) .sous_menu li a:hover:after, body:not(#page_accueil):not(#page__en_construction) .sous_menu li a:focus:after {
          color: var(--club-rail-accent, #8d93c1);
          opacity: 1; }
      body:not(#page_accueil):not(#page__en_construction) .sous_menu li a.active {
        background-color: var(--club-rail-actif, #353535) !important;
        box-shadow: inset 3px 0 0 var(--club-rail-accent, #8d93c1);
        color: var(--club-rail-fort, #fff);
        font-weight: 500; }
        body:not(#page_accueil):not(#page__en_construction) .sous_menu li a.active::after {
          color: var(--club-rail-accent, #8d93c1) !important;
          opacity: 1; }
    body:not(#page_accueil):not(#page__en_construction) .sous_menu li.menu_groupe {
      padding: 16px 16px 4px;
      font-size: 10.5px;
      letter-spacing: 0.1em;
      color: var(--club-rail-doux, #868686); }
    body:not(#page_accueil):not(#page__en_construction) .sous_menu li.menu_sortie {
      border-top-color: var(--club-rail-trait, #4c4c4c); }
    body:not(#page_accueil):not(#page__en_construction) .sous_menu #btn_reserver {
      margin: 8px 16px 12px;
      width: calc(100% - 32px);
      color: var(--club-bouton-texte, #fff);
      font-size: 14.5px;
      padding: 10px 14px; }
      body:not(#page_accueil):not(#page__en_construction) .sous_menu #btn_reserver:hover, body:not(#page_accueil):not(#page__en_construction) .sous_menu #btn_reserver:focus {
        color: var(--club-bouton-texte, #fff); }
      body:not(#page_accueil):not(#page__en_construction) .sous_menu #btn_reserver::after {
        color: var(--club-bouton-texte, #fff) !important; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_event {
    background: transparent;
    color: var(--club-rail-texte, #cecece);
    border: 1px solid var(--club-rail-trait, #4c4c4c);
    width: calc(100% - 32px);
    margin: 0 16px 8px !important;
    font-size: 13.5px;
    padding: 9px 12px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_event:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_event:focus {
      background: var(--club-rail-actif, #353535);
      color: var(--club-rail-fort, #fff);
      border-color: var(--club-rail-accent, #8d93c1); }
  body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu > li:first-child {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--club-rail, #1f1f1f); }
  body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu {
    scrollbar-color: var(--club-rail-trait, #4c4c4c) transparent;
    		/* La liste s'arrête au-dessus du pied de colonne, qui est posé
    		   par-dessus elle. La réserve était un nombre écrit à la main,
    		   qui ne valait que pour un pied d'une certaine hauteur : le
    		   pied porte l'adresse du club, et une adresse longue mangeait
    		   les dernières entrées du menu sans que rien ne le signale.
    
    		   Le script mesure le pied et pose sa hauteur ici. La valeur de
    		   repli sert le temps que le script s'exécute, et à qui n'en a
    		   pas.
    
    		   La réserve ne vaut que tant que le pied est posé par-dessus la
    		   liste, au bas d'une colonne fixe. Sur téléphone la colonne
    		   devient un bandeau et le pied un bloc ordinaire en fin de
    		   page : la réserve y ouvrait deux cents pixels de vide sous le
    		   menu replié, et le contenu ne commençait qu'à 581 px sur un
    		   écran haut de 568. Les deux « padding-bottom: 0 » posés plus
    		   loin ne pouvaient pas la défaire : l'un a la même spécificité
    		   et vient d'une requête de média, qui n'en ajoute aucune, et
    		   l'ordre du fichier tranchait ; l'autre en a moins. La réserve
    		   se pose donc là où elle sert, et nulle part ailleurs. */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu::-webkit-scrollbar-thumb {
      background-color: var(--club-rail-trait, #4c4c4c); }
    @media (min-width: 801px) {
      body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne .sous_menu {
        padding-bottom: calc(var(--pied-hauteur, 150px) + 14px); } }
  body:not(#page_accueil):not(#page__en_construction) .menu_mobile {
    width: calc(100% - 32px);
    margin: 4px 16px 10px;
    color: var(--club-rail-texte, #cecece);
    background-color: transparent;
    border-color: var(--club-rail-trait, #4c4c4c);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
    body:not(#page_accueil):not(#page__en_construction) .menu_mobile:hover, body:not(#page_accueil):not(#page__en_construction) .menu_mobile:focus {
      border-color: var(--club-rail-accent, #8d93c1);
      color: var(--club-rail-fort, #fff); }
  body:not(#page_accueil):not(#page__en_construction) .container {
    width: auto;
    max-width: 1240px;
    margin: 20px 24px 28px 272px; }

/* ---------------------------------------------------------------------- */
/*  2. La barre d'écran                                                    */
/* ---------------------------------------------------------------------- */
/*  Trente-quatre écrans se suivaient sous le même en-tête, sans que rien
    ne dise lequel était ouvert : seul le surlignage d'une entrée du menu
    répondait, et il passait sous la ligne de flottaison dès que la liste
    défilait.                                                              */
.barre_ecran {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-left: 248px;
  padding: 11px 24px;
  background-color: var(--club-fond, #fff);
  border-bottom: 1px solid var(--club-ligne, #e2e2e2);
  font-size: 13px;
  line-height: 1.3;
  /* Le séparateur du fil est un caractère, pas un trait : peint avec
     la couleur des bordures il sortait à 1,51 pour un. */
  /* Le nom de l'écran est le h1 de la page. Il vit dans une barre haute
     de trente-quatre pixels : la taille et l'interligne se reprennent à
     la barre, sinon l'échelle des titres, qui vaut maintenant aussi
     pour h1, le sortait à trente pixels et la barre doublait de hauteur
     sur les trente-quatre écrans. */ }
  .barre_ecran .fil_ecran {
    min-width: 0; }
  .barre_ecran .fil_groupe {
    color: var(--club-texte-doux, #787a86); }
  .barre_ecran .fil_separateur {
    color: var(--club-texte-doux, #787a86);
    margin: 0 6px; }
  .barre_ecran .fil_courant {
    font-weight: 600;
    color: var(--club-texte, #161a2e);
    font-size: inherit;
    line-height: inherit; }
  .barre_ecran .fil_qui {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap; }
  .barre_ecran .fil_nom {
    color: var(--club-texte, #161a2e); }
  .barre_ecran .fil_role {
    padding: 2px 8px;
    /* Douze pixels, et non dix et demi : ce libellé est lu sur
       chaque écran de l'espace, et il est en capitales, ce qui
       retire encore les repères de hauteur qui aident à lire
       petit. Douze est le plancher que le produit se donne. */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--club-texte-doux, #787a86);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px); }

/* La barre est le haut de la page : le conteneur qui la suit n'a plus
   besoin de la marge qui l'écartait de l'en-tête. */
.barre_ecran + .container {
  margin-top: 18px; }

/* ---------------------------------------------------------------------- */
/*  3. La densité                                                          */
/* ---------------------------------------------------------------------- */
/*  Trente pixels de remplissage par carte et vingt-cinq entre elles :
    trois séances remplissaient un écran. Une carte de gestion se lit de
    près.                                                                  */
#page_compte {
  	/* Une liste de quarante membres était quarante cartes séparées de
  	   trois pixels, chacune bordée sur ses quatre côtés : l'œil comptait
  	   des objets au lieu de lire une colonne. Les lignes se touchent, et
  	   la ligne suivante n'a plus de trait haut : les deux traits qui se
  	   superposaient n'en font plus qu'un.
  
  	   Le déclencheur d'un ajout garde son écart et ses angles : ce n'est
  	   pas une ligne de données, et rien ne doit le faire lire comme
  	   telle. */
  /* Une ligne dépliée reprend ses angles bas : son panneau la suit,
     et le trait du haut la sépare de la ligne précédente. */
  /* Les chiffres qui se comparent en colonne. */
  /* Les heures et les dates d'une ligne de liste : « 19h30 - 21h00 »,
     « Le 27-08-2026 à 18h21 ». En chasse fixe, elles se superposent
     d'une ligne à l'autre et se comparent sans les relire. */
  /* Les champs. Quarante-quatre pixels de haut et dix-huit de marge
     basse : un formulaire de dix champs demandait deux écrans. */
  	/* Les phrases d'un écran de gestion s'alignent sur la lecture. Le
  	   centrage venait du gabarit du site public, où il avait un sens :
  	   ici, une phrase centrée au-dessus d'une colonne de données
  	   alignée à gauche flottait sans point d'appui.
  
  	   Les blocs marqués « center » qui portent un bouton gardent leur
  	   centrage : c'est une action, pas une phrase. */
  /* Le panneau gris qui porte une recherche ou des filtres : il
     prenait le remplissage d'une carte alors qu'il ne porte qu'une
     ligne de commandes. */
  /* Les pastilles de tri et de filtre, du même cran que le reste. */
  	/* Un petit formulaire logé dans une cellule de tableau. La règle
  	   générale des formulaires les met en boîte flexible sur une seule
  	   ligne : l'intitulé « Motif » et son champ se retrouvaient côte à
  	   côte, le champ commençant exactement là où l'intitulé finissait,
  	   et les deux se lisaient comme un seul mot coupé. Ils s'empilent.
  
  	   L'intitulé reste écrit : la colonne dit ce qu'on constate, mais
  	   une lecture d'écran qui parcourt les champs un à un n'entend pas
  	   l'en-tête de colonne. */
  /* La légende des couleurs d'une liste : elle commence là où
     commencent les lignes qu'elle explique. Centrée, elle flottait
     au-dessus d'une colonne alignée à gauche. */
  	/* Le gabarit compose tout « span » imbriqué dans un paragraphe ou
  	   un titre en exergue : serif, italique, centrée, en bloc. C'était
  	   un effet de mise en page pour les pages publiques du club, où une
  	   phrase mise en avant a du sens. Dans un écran de gestion, il
  	   transformait chaque précision en citation : le nom d'un membre
  	   dans sa ligne, le décompte d'une feuille de séance, la parenthèse
  	   d'un titre. Chacun a été corrigé un par un ; la règle cesse ici.
  
  	   Les span qui portent une forme, non un texte, sont exclus : la
  	   pastille d'un membre, la jauge d'un tableau, le témoin d'une
  	   légende, l'aide sous un champ de réglage. */
  /* Les phrases secondaires d'un écran : elles reprenaient la serif
     italique par la même règle. */
  /* Le jalon d'une partie d'écran, à quelque profondeur qu'il soit.
     La règle posée plus haut ne visait que les titres portés
     directement par la section : sur la fiche d'un membre, où les
     parties vivent dans deux colonnes, « Identité », « Personne à
     prévenir » et « Famille » restaient en gras dix-huit pixels
     quand « Modifier la fiche », juste au-dessous, était un jalon.
     Le titre d'un panneau garde son traitement propre, sa règle
     pesant une classe de plus. */
  /* Un titre de partie porté par un conteneur restait centré : sur
     « Mon solde », « Inscription & assurance » se centrait au-dessus
     d'un panneau aligné à gauche. */
  /* Le décompte d'une feuille de séance : « 19 inscrits sur 24
     places ». La règle générale du gabarit compose tout « span » en
     exergue serif italique centrée, ce qui en faisait une citation
     au-dessus d'un tableau. C'est un chiffre, il se lit comme les
     autres. */
  /* La hauteur minimale d'une cible tactile. Resserrer les commandes
     est le propos de cette direction, mais un doigt ne vise pas ce
     qui fait moins de trente pixels : les pastilles de tri à
     vingt-huit et les numéros de page à vingt-huit se ratent une
     fois sur trois. Elles gardent leur air resserré et retrouvent
     leur hauteur de prise. */
  	/*  Une pagination d'une seule page ne se dessine pas.
  
  	    Les quatre écrans paginés du produit — l'historique, les comptes,
  	    les paiements, mes séances — écrivent leur <ul> avant de savoir
  	    combien de pages il y a, et n'y mettent de puces qu'au-delà de la
  	    première. Sur un club neuf, la liste tenait donc sur une page et
  	    la barre restait là, sans rien dedans, avec ses cinquante pixels
  	    de marge en haut et cinquante en bas : cent pixels de blanc entre
  	    la liste et le bas de l'écran, que rien n'expliquait.
  
  	    « :empty » ne suffit pas : le <ul> contient les retours à la ligne
  	    du gabarit, et n'est donc jamais vide au sens de la feuille de
  	    style. C'est l'absence de puce qui compte.                       */
  /* Un formulaire était centré dans sa carte : son premier champ
     commençait soixante pixels à droite du titre de l'écran, et rien
     ne s'alignait plus. Il part du bord, comme les listes et les
     tableaux. */
  /* Une phrase d'explication tirée sur onze cents pixels se relit
     deux fois : l'œil perd la ligne en revenant à gauche. */
  	/* Une phrase tirée sur onze cents pixels se relit deux fois :
  	   l'œil perd sa ligne en revenant à gauche. La mesure est donnée
  	   en pixels, non en « ch » : cette unité vaut la largeur du zéro
  	   de la police en cours, et les six polices proposées au club en
  	   ont chacune une autre. La mesure du texte n'a pas à changer
  	   parce qu'un club a choisi une étroite.
  
  	   Les blocs marqués « btn » sont exclus : ce sont des boutons, et
  	   un bouton prend la largeur de son intitulé. */
  /* Le centrage ne quittait que les paragraphes : sur l'écran de
     réservation, « Choisissez la date et l'heure de votre séance »
     restait centré, en h5, juste au-dessus de sa suite alignée à
     gauche. Deux phrases qui se suivent ne commencent pas à deux
     endroits différents. Les titres portés par la classe « center »
     suivent leurs paragraphes. */
  /* Les boutons d'un écran de gestion : du même cran que ses champs
     et ses lignes. Quinze pixels et vingt-deux de retrait faisaient
     un bouton plus haut que le champ qu'il valide. */
  /* Un bouton centré sous un formulaire aligné à gauche flotte sans
     point d'appui : l'action commence là où commence la lecture.
     Les boutons pleine largeur et ceux d'une ligne de liste gardent
     leur place. */
  /* Les titres portés par un panneau : ils restaient centrés et
     grands au milieu d'un écran passé à gauche. */ }
  #page_compte section {
    padding: 20px 22px;
    margin: 0 0 14px;
    border-radius: var(--club-arrondi, 4px);
    box-shadow: none; }
  #page_compte section > h3,
  #page_compte section > form > h3 {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 14px; }
  #page_compte .list_form {
    margin: 0; }
  #page_compte .list_form > .btn_form:not(.btn_theform),
  #page_compte .list_form > .entete_seance > .btn_form {
    border-radius: 0; }
  #page_compte .list_form + .list_form > .btn_form:not(.btn_theform),
  #page_compte .list_form + .list_form > .entete_seance > .btn_form {
    border-top: none; }
  #page_compte .list_form > .btn_theform {
    margin: 4px 0; }
  #page_compte .list_form > .btn_form.actif {
    border-top: 1px solid var(--club-principale, #39449f); }
  #page_compte .btn_form {
    padding: 7px 14px;
    font-size: 14px; }
  #page_compte .slide_form {
    padding: 14px; }
  #page_compte .btn_form b,
  #page_compte .pastille_texte,
  #page_compte .compte_seances,
  #page_compte .totaux_mois,
  #page_compte .ligne_paiement,
  #page_compte .table_seance td,
  #page_compte .tableau_admin td {
    font-variant-numeric: tabular-nums; }
  #page_compte .btn_form b.color_light,
  #page_compte .compte_seances {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-weight: 500;
    font-size: 13px; }
  #page_compte .btn_form small {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 12px; }
  #page_compte form fieldset {
    /* Les cases et les boutons radio sont exclus : ce sont des
       carrés de seize pixels, et un remplissage de onze pixels les
       étirait jusqu'à recouvrir leur propre intitulé. */ }
    #page_compte form fieldset select, #page_compte form fieldset input:not([type="checkbox"]):not([type="radio"]), #page_compte form fieldset textarea {
      padding: 7px 11px 6px;
      font-size: 14px;
      margin: 5px 0 14px; }
    #page_compte form fieldset select {
      height: 34px; }
    #page_compte form fieldset input[type="date"] {
      min-height: 34px; }
    #page_compte form fieldset label {
      font-size: 12.5px; }
  #page_compte section p.center:not(.btn) {
    text-align: left; }
  #page_compte .bloc_text {
    padding: 12px 14px; }
  #page_compte .bloc_text form fieldset select,
  #page_compte .bloc_text form fieldset input {
    margin-bottom: 0; }
  #page_compte .lien_tri {
    padding: 4px 11px;
    font-size: 13px; }
  #page_compte .tableau_admin td form, #page_compte .table_seance td form {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    max-width: 280px;
    /* Ces champs ne sont pas dans un « fieldset » : la règle qui
       donne aux champs leur trait et leur remplissage ne les
       atteignait pas, et ils s'affichaient sans cadre, comme du
       texte. Un champ se reconnaît à son trait. */ }
    #page_compte .tableau_admin td form label, #page_compte .table_seance td form label {
      margin: 0;
      font-size: 12px; }
    #page_compte .tableau_admin td form input, #page_compte .tableau_admin td form select, #page_compte .table_seance td form input, #page_compte .table_seance td form select {
      margin: 0;
      width: 100%;
      padding: 6px 10px;
      font-size: 13px;
      font-family: "IBM Plex Sans", "Lato", sans-serif;
      color: var(--club-texte, #161a2e);
      background-color: var(--club-fond, #fff);
      border: 1px solid var(--club-ligne, #e2e2e2);
      border-radius: var(--club-arrondi, 4px); }
      #page_compte .tableau_admin td form input:focus, #page_compte .tableau_admin td form select:focus, #page_compte .table_seance td form input:focus, #page_compte .table_seance td form select:focus {
        border-color: var(--club-principale, #39449f); }
    #page_compte .tableau_admin td form .btn, #page_compte .table_seance td form .btn {
      margin: 3px 0 0 !important;
      align-self: flex-start; }
  #page_compte .legende_membres {
    justify-content: flex-start;
    margin-bottom: 10px; }
  #page_compte section :is(p, h2, h3, h4, h5, h6, b, a, i, label) span:not(.pastille_ordre):not(.jauge):not(.jauge_pleine):not(.jauge_temoin):not(.temoin):not(.aide_reglage):not(.vignette_membre) {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-style: normal;
    text-align: inherit; }
  #page_compte section small {
    font-family: inherit;
    font-style: normal; }
  #page_compte section h3 {
    text-align: left; }
  #page_compte section h4 {
    text-align: left;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--club-texte-doux, #6b6e7b);
    margin: 24px 0 6px; }
  #page_compte section .div_flex > div > h4:first-child {
    margin-top: 0; }
  #page_compte .separateur_seance {
    display: block;
    text-align: left;
    font-family: inherit;
    font-style: normal;
    font-size: 13.5px;
    color: var(--club-texte-doux, #787a86);
    margin: 0 0 12px; }
    #page_compte .separateur_seance b {
      font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
      font-weight: 500;
      color: var(--club-texte, #161a2e); }
  #page_compte .lien_tri {
    min-height: 32px;
    display: inline-flex;
    align-items: center; }
  #page_compte .list_pagination li {
    width: 32px;
    height: 32px; }
  #page_compte form {
    margin-left: 0;
    margin-right: 0; }
  #page_compte form fieldset textarea {
    height: 90px; }
  #page_compte section p:not(.btn) {
    max-width: 680px; }
  #page_compte section h4.center:not(.btn),
  #page_compte section h5.center:not(.btn):not(.btn_form),
  #page_compte section h6.center:not(.btn) {
    text-align: left; }
  #page_compte .intro_reglage {
    max-width: 680px; }
  #page_compte .btn, #page_compte .btn2 {
    padding: 8px 18px;
    font-size: 14px;
    min-width: 120px; }
  #page_compte .btn.btn_small {
    padding: 6px 14px;
    font-size: 13px;
    min-width: 0; }
  #page_compte p.btn {
    padding: 0; }
  #page_compte p.btn > a {
    display: block;
    padding: 8px 18px; }
  #page_compte section .btn:not(.btn_block), #page_compte section .btn2:not(.btn_block) {
    margin-left: 0;
    margin-right: auto; }
  #page_compte .entete_seance .btn, #page_compte .tableau_admin .btn, #page_compte .table_seance .btn {
    margin: 0; }
  #page_compte .bloc_text > h4, #page_compte .bloc_text > h5, #page_compte .bloc_text > form > h4 {
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px; }

/* Une colonne de nombres se lit alignée par la droite : les unités
   sous les unités, les dizaines sous les dizaines. */
.tableau_admin th.col_nombre, .tableau_admin td.col_nombre, .table_seance th.col_nombre, .table_seance td.col_nombre {
  text-align: right;
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-variant-numeric: tabular-nums; }
.tableau_admin th.col_nombre, .table_seance th.col_nombre {
  font-family: inherit; }

/* Le sommaire de l'écran d'administration : huit boutons espacés
   flottaient au-dessus de la carte comme huit actions. Ce sont des
   onglets : ils se touchent, et se posent sur la carte qu'ils
   ouvrent. */
/*  Le sommaire de l'écran d'administration mène aux parties d'une même
    page ; la barre d'onglets, elle, mène à d'autres écrans. Il avait pris
    l'allure d'onglets, et les deux se suivaient : deux rangées d'onglets
    l'une sous l'autre, dont l'une ne changeait pas de page.

    Il redevient ce qu'il est, une suite de raccourcis vers le bas de la
    page, à l'allure des pastilles de tri.                                */
.sommaire_admin {
  gap: 6px;
  margin: 0 0 16px;
  flex-wrap: wrap; }
  .sommaire_admin a {
    padding: 5px 12px;
    font-size: 12.5px;
    border-radius: 999px;
    background-color: var(--club-fond, #fff);
    border-color: var(--club-ligne, #e2e2e2); }
    .sommaire_admin a:hover, .sommaire_admin a:focus {
      background-color: var(--club-principale-claire, #efb7b8);
      border-color: var(--club-principale, #39449f); }

/* ---------------------------------------------------------------------- */
/*  4. La ligne d'une séance                                               */
/* ---------------------------------------------------------------------- */
/*  Le titre d'une séance portait « 19/24 » sans que rien ne dise si
    c'était plein, à moitié vide, ou à deux places de l'être. Le rapport
    se lit d'un coup d'œil, en barre, sous la ligne.

    Le taux vient de l'écran, qui l'a déjà calculé pour l'afficher : la
    feuille de style ne sait pas compter.                                  */
.entete_seance {
  /* Une colonne de vingt boutons pleins bordés, posés à droite de
     vingt lignes elles-mêmes bordées, faisait quarante cadres pour
     vingt séances. Le cadre passe sur la ligne entière, et la feuille
     de séance devient sa dernière colonne, séparée par un trait. */
  gap: 0;
  border: 1px solid var(--club-ligne, #e2e2e2);
  background-color: var(--club-fond, #fff); }
  .entete_seance .btn_form {
    position: relative;
    overflow: hidden;
    /* La barre occupe le bas de la ligne, sur toute sa largeur. */
    /* Une séance complète le dit dans sa couleur : c'est le seul
       état qui change une décision. */ }
    .entete_seance .btn_form::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: var(--taux, 0%);
      background-color: var(--club-principale, #39449f); }
    .entete_seance .btn_form.seance_complete::after {
      background-color: var(--club-secondaire, #0a7d62); }
  .entete_seance > .btn_form {
    border: none;
    background: transparent; }
  .entete_seance .btn.btn_white {
    font-size: 13px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: 0;
    color: var(--club-principale, #39449f); }
    .entete_seance .btn.btn_white:hover, .entete_seance .btn.btn_white:focus {
      background: var(--club-principale-claire, #efb7b8); }

/* Les lignes se touchent : la suivante n'a plus de trait haut. */
.list_form + .list_form > .entete_seance {
  border-top: none; }

/*  Le cadre de la liste des inscrits d'une séance.

    Il ne contient plus des lignes mais des cartes : la grille et la
    carte sont décrites plus bas, avec « Les inscrits d'une séance, en
    cartes ». Ce qui reste ici est le cadre qui les entoure, commun aux
    deux écrans qui les montrent.                                          */
.inscrits {
  display: flex;
  flex-direction: column;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  overflow: hidden; }

/* ---------------------------------------------------------------------- */
/*  5. Les tableaux                                                        */
/* ---------------------------------------------------------------------- */
/*  Un tableau de six colonnes ne rentre pas dans un téléphone. Il n'y
    rentrait pas davantage avant : il dépassait de sa carte, et le
    « overflow-x: hidden » posé sur le corps de page coupait sa dernière
    colonne sans que rien ne dise qu'il en manquait une.

    Le cadre défile, pas le tableau lui-même : passer la balise « table »
    en bloc rendrait bien le débordement possible, mais l'en-tête et le
    corps cesseraient de partager leurs colonnes, et les intitulés ne
    tomberaient plus au-dessus de leurs valeurs.

    Le trait sur les bords dit qu'il y a autre chose à droite : sans lui,
    un tableau coupé ressemble à un tableau complet.                       */
.tableau_defilant {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; }
  .tableau_defilant > table {
    min-width: 100%; }

/*  Le jalon d'une semaine, dans la liste des réservations.               */
p[id^="week_"] {
  margin: 20px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--club-ligne, #e2e2e2); }
  p[id^="week_"]:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0; }
  p[id^="week_"] b {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 11px; }

/*  La ligne d'un membre : resserrée du même cran que les séances.        */
.ligne_membre {
  padding: 5px 14px; }
  .ligne_membre .compte_seances {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace); }

#page_compte .ligne_membre .compte_seances {
  font-size: 11.5px; }

/*  La liste où l'on écrit pour chercher.

    Le champ reprend l'aspect d'un champ de saisie du produit : c'en est
    un. La liste des propositions se pose par-dessus la suite de la page
    plutôt que de la pousser vers le bas, faute de quoi le formulaire
    sautait de deux cents pixels à chaque lettre tapée.                    */
.choix {
  position: relative;
  width: 100%;
  min-width: 0; }

/*  Hors des formulaires en ligne, l'enveloppe et son champ prennent la
    largeur qu'on leur donne : celle du fieldset qui les contient.        */
.choix > input.choix_champ {
  width: 100%; }

/*  LE PORTRAIT D'UN ENSEIGNANT, SUR LA PAGE DE L'ÉQUIPE.

    Facultatif : la fiche garde sa forme sans lui, et la grille reste
    alignée. Carré et rogné au centre, pour que trois photos prises
    n'importe comment se ressemblent une fois côte à côte.             */
.fiche_portrait {
  display: block;
  width: 96px;
  height: 96px;
  max-width: 100%;
  margin: 0 auto 10px;
  border-radius: 50%;
  object-fit: cover; }

/*  « QUE SOUHAITEZ-VOUS FAIRE ? », EN TÊTE DE L'INSCRIPTION.

    Cinq portes plutôt qu'un formulaire unique : le parent qui inscrit
    son enfant remplissait ses propres coordonnées sans savoir que les
    champs « enfants » existaient, repliés, plus bas.                  */
.choix_intentions {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px; }
  .choix_intentions li {
    margin-bottom: 10px; }
  .choix_intentions a {
    display: block;
    padding: 15px 18px;
    border: 1px solid var(--club-ligne, #e2e3e9);
    border-radius: 12px;
    background: var(--club-carte-fond, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease; }
  .choix_intentions a:hover, .choix_intentions a:focus-visible {
    border-color: var(--club-principale, #39449f);
    box-shadow: 0 2px 12px -6px rgba(31, 31, 31, 0.4); }
  .choix_intentions b {
    display: block;
    font-size: 17px; }
  .choix_intentions span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--club-texte-doux, #787a86); }

/*  LA LICENCE : Non / Oui, puis deux champs qui n'apparaissent qu'au
    « oui ». Sans script ils restent visibles, et deux champs vides ne
    gênent personne — c'est la règle du produit pour tout ce qui se
    replie.                                                            */
.fieldset_licence .etiquette_groupe {
  display: block;
  position: static;
  padding: 0 0 8px;
  border: 0;
  font-weight: 600; }
.choix_licence {
  display: flex;
  gap: 8px; }

/*  LES DEUX CHAMPS DE LA LICENCE.

    « champs_licence » était un div nu, sans une règle à son nom. Or un
    formulaire du produit est une boîte souple : un div nu y devient un
    élément de ligne qui se réduit à son contenu, et ses deux cadres —
    qui n'ont pas de classe de largeur non plus — se sont réduits avec
    lui. « Organisme » et « Date d'expiration » faisaient QUATRE-VINGT-
    DEUX pixels de large sur un écran d'ordinateur : le nom d'une
    fédération y tenait sur huit lettres, et l'intitulé « Date
    d'expiration » se coupait en deux lignes au-dessus d'un champ où
    « jj-mm-aaaa » ne rentrait pas.

    Le bloc prend la ligne entière, et ses deux champs se la partagent —
    en colonne dès que la place manque.                                */
.champs_licence {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  width: 100%;
  max-width: 100%; }
  .champs_licence > fieldset {
    flex: 1 1 220px;
    min-width: 0;
    max-width: none; }
  .champs_licence > fieldset input {
    width: 100%; }

/*  LE CHOIX DES JOURS HABITUELS.

    Sept cases qui tiennent sur une ligne et se replient quand la place
    manque. Elles servent au membre, avant de payer son abonnement, et
    au club, sur la fiche, pour poser les jours d'un abonnement qui
    n'en a pas encore.                                                 */
.choix_jours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }
  .choix_jour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--club-ligne, #e2e3e9);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    background: var(--club-carte-fond, #fff);
    /*  LA PASTILLE FAIT LA LARGEUR DE SON JOUR.

        Le nom du jour sortait de la case blanche et se faisait recouvrir
        par la suivante : on lisait « Lu », « Me », « Ve ». La pastille
        est un élément d'une boîte souple, et sa largeur de base se
        calcule sur son contenu — un calcul que tous les moteurs ne
        mènent pas de la même façon dès qu'il y a une case à cocher
        dedans, dont la taille réelle dépend du thème du système.

        On ne laisse plus le calcul décider : la pastille ne grandit ni
        ne rétrécit, elle vaut AU MOINS la largeur de ce qu'elle
        contient, et le nom du jour ne se coupe pas.                  */
    flex: 0 0 auto;
    width: auto;
    min-width: -webkit-max-content;
    min-width: max-content;
    white-space: nowrap; }
  .choix_jour input {
    position: static;
    width: 15px;
    height: 15px;
    /* Une case à cocher ne rétrécit pas sous la largeur qu'on lui
       donne : sans cela, une pastille étroite la comprimait jusqu'à
       la faire disparaître. */
    min-width: 15px;
    max-width: 15px;
    margin: 0;
    flex: 0 0 auto; }
  .choix_jour span {
    flex: 0 0 auto;
    min-width: 0; }
  .choix_jour:focus-within {
    outline: 2px solid var(--club-principale, #39449f);
    outline-offset: 2px; }

/*  REMPLACER UNE SÉANCE : la liste des séances et celle des créneaux.

    Une ligne par proposition : quand, quel cours, et soit le bouton qui
    la prend, soit le motif qui la ferme. Les deux se voient : cacher un
    créneau fermé laisse le membre chercher pourquoi son mercredi
    n'apparaît pas.                                                    */
.liste_remplacables {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px; }
  .liste_remplacables li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 14px;
    border: 1px solid var(--club-ligne, #e2e3e9);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--club-carte-fond, #fff); }
  .liste_remplacables li.rempl_ferme {
    opacity: 0.62;
    background: var(--club-carte-rayure, #f6f7fa); }
  .liste_remplacables .rempl_quand {
    flex: 1 1 190px;
    min-width: 0; }
  .liste_remplacables .rempl_cours {
    flex: 1 1 150px;
    min-width: 0;
    color: var(--club-texte-doux, #787a86); }
  .liste_remplacables .rempl_motif {
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--club-texte-doux, #787a86); }
  .liste_remplacables form {
    margin: 0; }

/*  LE CHOIX DU PUBLIC ET LES FORMULES, SUR LA PAGE PUBLIQUE.

    Même matière que l'accueil, sur un fond clair : la page « Horaires
    et tarifs » n'a pas la photo de fond du bandeau, et les règles
    ci-dessous ne peuvent donc pas reprendre les blancs translucides
    de .vit_formule.                                                   */
.filtres_publics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px; }

.formules_publiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 26px; }
  .formule_publique {
    border: 1px solid var(--club-ligne, #e2e3e9);
    border-radius: 12px;
    padding: 20px 20px 10px;
    background: var(--club-carte-fond, #fff); }
  .formule_titre {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--club-principale, #39449f); }
  .formule_aide {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--club-texte-doux, #787a86); }
  .formule_durees {
    list-style: none;
    margin: 0;
    padding: 0; }
  .formule_durees li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 0;
    border-top: 1px solid var(--club-ligne, #e2e3e9); }
  .formule_duree {
    flex: 1 1 auto;
    min-width: 0; }
  .formule_prix {
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap; }
  .formule_note {
    flex: 1 0 100%;
    font-size: 12px;
    color: var(--club-texte-doux, #787a86); }

/*  Le sous-titre d'un cours : « cours adapté aux seniors » sous
    « KENKO 60+ ». Facultatif ; sans lui, la ligne est celle d'avant. */
.cours_soustitre {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--club-texte-doux, #787a86); }

/*  LES QUATRE PUBLICS, EN TÊTE DE L'ACCUEIL.

    « Chaque personne arriverait ainsi directement vers les horaires,
    tarifs et inscriptions qui la concernent. » Quatre entrées sous le
    nom du club, avant les boutons : on se reconnaît d'abord, on décide
    ensuite.                                                           */
.vit_publics {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 780px; }
  .vit_publics a {
    display: block;
    height: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    background: rgba(10, 12, 18, 0.52);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease; }
  .vit_publics a:hover, .vit_publics a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55); }
  .vit_publics b {
    display: block;
    font-size: 17px;
    line-height: 1.2; }
  .vit_publics span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.92; }

/*  « J'ai déjà un compte » n'est plus un bouton : il accompagne les
    deux portes d'entrée sans leur disputer le regard.                 */
.vit_lien_discret {
  display: inline-block;
  align-self: center;
  padding: 6px 4px;
  font-size: 14px;
  text-decoration: underline;
  opacity: 0.85; }

/*  LES TROIS FORMULES D'ABONNEMENT, SUR LA PAGE D'ACCUEIL.

    Douze tuiles de prix se suivaient, triées par un ordre interne : le
    visiteur devait les lire toutes pour comprendre qu'il n'y a que
    trois choix. Une colonne par rythme, les durées dedans, du plus
    court au plus long.                                                */
.vit_formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 28px; }
  .vit_formule {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 22px 22px 12px;
    background: rgba(255, 255, 255, 0.04); }
  .vit_formule_titre {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.2; }
  .vit_formule_aide {
    margin: 0 0 14px;
    font-size: 14px;
    opacity: 0.75; }
  .vit_formule_durees {
    list-style: none;
    margin: 0;
    padding: 0; }
  .vit_formule_durees li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .vit_duree {
    flex: 1 1 auto;
    min-width: 0; }
  .vit_duree_prix {
    font-weight: 700;
    font-size: 19px;
    white-space: nowrap; }
  .vit_duree_note {
    flex: 1 0 100%;
    font-size: 12px;
    opacity: 0.6; }

/*  La case « Rester connecté » a disparu du formulaire de connexion :
    la session vaut un an pour tout le monde, et la phrase qui le dit
    est un simple paragraphe. Les règles qui redressaient cette case
    dans un formulaire à étiquettes absolues sont parties avec elle.   */

/*  L'écran de réservation : le récapitulatif avant de confirmer.

    Ce qu'on vient vérifier avant d'appuyer, la date, l'heure, le cours
    et les places restantes, s'écrivait en une phrase centrée de deux
    lignes, avec les valeurs en couleur au milieu du texte. Chaque
    chose a sa place, et les deux nombres qui décident se disent en
    pastilles.                                                          */
/*  UNE CARTE DANS UNE CARTE N'EST PAS UNE CARTE.

    Ce récapitulatif est le SEUL contenu de sa carte. Il portait
    pourtant son propre fond gris, son propre filet et son propre
    arrondi : deux surfaces emboîtées pour une seule idée, avec
    quarante pixels de marges qui ne séparent rien de rien.

    Il garde la bande de couleur du club à gauche — c'est elle qui dit
    « voici la séance », et elle ne coûte pas une surface — et prend la
    place de la carte plutôt que de s'y loger.                       */
.recap_seance {
  margin: 0 0 20px;
  padding: 2px 0 2px 16px;
  background-color: transparent;
  border: 0;
  border-left: 4px solid var(--club-principale, #39449f);
  border-radius: 0;
  box-shadow: none; }
  .recap_seance .recap_intitule {
    margin: 0 0 2px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--club-principale, #39449f); }
  .recap_seance .recap_quand {
    margin: 0 0 10px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px; }
    .recap_seance .recap_quand .recap_jour {
      font-size: 17px;
      color: var(--club-encre, #1b1b1b); }
    .recap_seance .recap_quand .recap_date {
      font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
      font-size: 22px;
      font-weight: 700;
      color: var(--club-encre, #1b1b1b); }
    .recap_seance .recap_quand .recap_heure {
      font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
      font-size: 17px;
      color: var(--club-texte-doux, #787a86); }
  .recap_seance .recap_etats {
    margin: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px; }

.recap_regle {
  margin: 18px 0 0;
  text-align: left;
  font-size: 13.5px;
  color: var(--club-texte-doux, #787a86); }

.recap_retour {
  margin: 6px 0 0;
  text-align: left; }
  .recap_retour a {
    font-size: 14px; }

.recap_complet {
  margin: 0 0 12px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px; }

/*  L'écran ouvert sans choix : le cas normal, pas une panne.          */
.invite_reservation {
  max-width: 560px;
  padding: 22px 24px;
  background-color: var(--club-surface-page, #f7f7f8);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px); }
  .invite_reservation h4 {
    margin: 0 0 6px;
    text-align: left;
    font-size: 17px;
    text-transform: none; }
  .invite_reservation p {
    margin: 0 0 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: var(--club-texte-doux, #787a86); }
  .invite_reservation .recap_etats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px; }
  .invite_reservation .btn {
    margin: 0; }

/*  La carte de réservation : calendrier et créneaux dans la page.

    Plus de volet dans le menu. Le mois se lit ici, à la taille d'un
    calendrier, pas d'un widget de 340 px accroché à la barre. Le
    bandeau gauche reprend la couleur du club, comme le récapitulatif
    de séance.                                                          */
.carte_reservation {
  max-width: 920px;
  padding: 24px 26px 26px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  box-shadow: inset 4px 0 0 var(--club-principale, #253266); }
  .carte_reservation h4 {
    margin: 0 0 6px;
    text-align: left;
    font-size: 20px;
    text-transform: none;
    color: var(--club-encre, #1b1b1b); }
  .carte_reservation > p {
    margin: 0 0 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: var(--club-texte-doux, #787a86); }
  .carte_reservation .recap_etats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px; }
  .carte_reservation .carte_reservation_corps {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 1fr);
    gap: 22px 32px;
    align-items: start; }
  .carte_reservation .carte_reservation_calendrier,
  .carte_reservation .carte_reservation_creneaux {
    min-width: 0; }
  .carte_reservation .carte_reservation_calendrier fieldset {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    margin: 0; }
  .carte_reservation.calendrier_pose .carte_reservation_calendrier fieldset #search_form_date {
    order: 2; }
  .carte_reservation.calendrier_pose .carte_reservation_calendrier fieldset .datepicker-inline {
    order: 1; }
  .carte_reservation .carte_reservation_calendrier label {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--club-principale, #253266); }
  .carte_reservation .carte_reservation_calendrier #search_form_date {
    width: 100%;
    max-width: 380px;
    height: 42px;
    margin: 10px 0 0;
    padding: 8px 12px;
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    border-radius: var(--club-arrondi, 4px);
    color: var(--club-texte, #161a2e);
    font-size: 15px; }
  .carte_reservation .carte_reservation_calendrier .datepicker-inline {
    width: 100%;
    max-width: 380px;
    margin: 0; }
  .carte_reservation .carte_reservation_calendrier .datepicker-inline .datepicker {
    width: 100% !important;
    margin: 0;
    padding: 12px 10px 14px;
    background: var(--club-surface-page, #f7f7f8);
    border: 1px solid var(--club-ligne, #e2e2e2) !important;
    border-radius: var(--club-arrondi, 4px) !important;
    box-shadow: none;
    font-size: 15px; }
  .carte_reservation .carte_reservation_calendrier .datepicker--nav {
    border-bottom: 1px solid var(--club-ligne, #e2e2e2);
    margin-bottom: 8px; }
  .carte_reservation .carte_reservation_calendrier .datepicker--nav-title {
    color: var(--club-principale, #253266);
    font-weight: 700;
    text-transform: capitalize; }
    .carte_reservation .carte_reservation_calendrier .datepicker--nav-title i {
      color: var(--club-texte-doux, #787a86); }
  .carte_reservation .carte_reservation_calendrier .datepicker--day-name {
    color: var(--club-principale, #253266);
    font-weight: 600; }
  .carte_reservation .carte_reservation_calendrier .datepicker--cell {
    height: 40px;
    border: none;
    border-radius: 6px !important;
    font-size: 14.5px; }
  .carte_reservation .carte_reservation_calendrier .datepicker--cell.-current- {
    color: var(--club-principale, #253266);
    font-weight: 700; }
  .carte_reservation .carte_reservation_calendrier .datepicker--cell.-selected-,
  .carte_reservation .carte_reservation_calendrier .datepicker--cell.-selected-.-current-,
  .carte_reservation .carte_reservation_calendrier .datepicker--cell.-selected-.-focus- {
    color: #fff;
    background: var(--club-principale, #253266);
    font-weight: 700; }
  .carte_reservation .carte_reservation_calendrier .datepicker--cell.-disabled- {
    color: var(--club-texte-doux, #787a86);
    opacity: 0.38; }
  .carte_reservation .carte_reservation_calendrier .datepicker--cell:hover:not(.-disabled-):not(.-selected-) {
    background: var(--club-principale-claire, #e8eaf4); }
  .carte_reservation .carte_reservation_creneaux fieldset {
    width: 100%;
    margin: 0 0 14px; }
  .carte_reservation .carte_reservation_creneaux label {
    display: block;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--club-principale, #253266); }
  .carte_reservation .carte_reservation_creneaux select {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 10px 12px;
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    border-radius: var(--club-arrondi, 4px);
    color: var(--club-texte, #161a2e);
    font-size: 14.5px; }
  .carte_reservation .carte_reservation_creneaux .etat_aucun_creneau {
    margin: 0 0 14px;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    color: var(--club-alerte, #a32b2b);
    background-color: var(--club-alerte-fond, #fbeaea);
    border: 1px solid var(--club-alerte-trait, #efc9c9);
    border-radius: var(--club-arrondi, 4px); }
  .carte_reservation .carte_reservation_creneaux button.btn {
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    font-size: 16px;
    background-color: var(--club-bouton, #253266);
    color: var(--club-bouton-texte, #fff);
    border-radius: var(--club-arrondi, 4px); }
    .carte_reservation .carte_reservation_creneaux button.btn:hover, .carte_reservation .carte_reservation_creneaux button.btn:focus {
      background-color: var(--club-principale-fonce, #1a2348);
      color: var(--club-bouton-texte, #fff); }
    .carte_reservation .carte_reservation_creneaux button.btn:disabled {
      opacity: 0.45;
      cursor: not-allowed; }

@media screen and (max-width: 720px) {
  .carte_reservation {
    padding: 18px 16px 20px; }
    .carte_reservation .carte_reservation_corps {
      grid-template-columns: 1fr;
      gap: 18px; }
    .carte_reservation .carte_reservation_calendrier fieldset,
    .carte_reservation .carte_reservation_calendrier #search_form_date,
    .carte_reservation .carte_reservation_calendrier .datepicker-inline {
      max-width: none; } }
/*  Les quatre cartes de « Mes données personnelles ».

    L'écran empilait cinq blocs pleine largeur, dont trois paragraphes
    de droit comptable au-dessus du bouton d'effacement : douze cents
    pixels de haut pour trois gestes et une liste de rappels. Les
    gestes se lisent mieux côte à côte, et le détail légal, qui reste
    écrit mot pour mot, se déplie sous celui qu'il concerne.          */
.cartes_donnees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  align-items: start; }

.carte_donnee {
  padding: 16px 18px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  /* La carte qui efface porte le rouge de ce qui ne se défait pas. */ }
  .carte_donnee h4 {
    margin: 0 0 6px;
    text-align: left;
    font-size: 16px;
    text-transform: none; }
  .carte_donnee p {
    margin: 0 0 12px;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--club-texte-doux, #787a86); }
  .carte_donnee form {
    margin: 0;
    max-width: none; }
  .carte_donnee .btn {
    margin: 0; }
  .carte_donnee fieldset {
    width: 100%;
    padding: 0;
    margin-bottom: 10px; }
  .carte_donnee .etat_donnee {
    margin: 0; }
  .carte_donnee.carte_donnee_alerte {
    border-color: var(--club-alerte-trait, #efc9c9);
    box-shadow: inset 3px 0 0 var(--club-alerte, #a32b2b); }
    .carte_donnee.carte_donnee_alerte h4 {
      color: var(--club-alerte, #a32b2b); }
  .carte_donnee .detail_donnee {
    margin-bottom: 12px; }
    .carte_donnee .detail_donnee summary {
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--club-principale, #39449f);
      padding: 4px 0; }
    .carte_donnee .detail_donnee p {
      margin: 8px 0 0;
      font-size: 12.5px; }
  .carte_donnee .droits_restants {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    /* Le gabarit donne aux liens une taille à eux : dans une phrase,
       le lien devenait plus gros que le texte autour. */ }
    .carte_donnee .droits_restants a {
      font-size: inherit; }
    .carte_donnee .droits_restants li {
      display: list-item;
      margin: 0 0 8px;
      text-align: left;
      font-size: 13.5px;
      line-height: 1.5; }
      .carte_donnee .droits_restants li::marker {
        color: var(--club-principale, #39449f); }

/* Un mot dans une tuile de chiffres : il ne prend pas la taille d'un
   nombre, qui le ferait déborder de sa tuile. */
/*  LA FONTE DES NOMBRES EST POUR LES NOMBRES.

    La bande de chiffres écrit ses valeurs à chasse fixe : c'est ce qui
    aligne « 12 » sous « 2 » et les rend comparables d'un coup d'œil.
    Elle ne réduisait que la TAILLE d'une valeur qui n'est pas un
    nombre, pas sa fonte : « aucun certificat » s'affichait en grandes
    capitales de machine à écrire, et « 01-04-2027 » se lisait comme un
    nombre de huit chiffres.                                          */
.chiffre b.chiffre_mot {
  font-family: var(--club-police, inherit);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35; }

/*  Les fiches d'écran du tutoriel : une carte par écran, ce qu'il est
    et ce qu'on y fait. En grille, parce qu'une colonne de trente fiches
    se parcourt mal et que la place est là.                            */
.titre_groupe_ecrans {
  margin: 0 0 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-texte-doux, #787a86); }

.fiches_ecrans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 12px; }

.fiche_ecran {
  padding: 12px 14px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  /* Le trait de couleur tient lieu de titre de carte : il marque le
     début d'une fiche sans ajouter une ligne de plus. */
  box-shadow: inset 3px 0 0 var(--club-principale, #39449f);
  /* Le gabarit remet les listes à zéro : sans puce déclarée, les
     gestes se lisaient comme des phrases collées. */ }
  .fiche_ecran h5 {
    margin: 0 0 4px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--club-encre, #1b1b1b);
    text-transform: none; }
  .fiche_ecran .fiche_ecran_quoi {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    color: var(--club-texte-doux, #787a86); }
  .fiche_ecran ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc; }
  .fiche_ecran li {
    margin: 0 0 3px;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left;
    display: list-item; }
    .fiche_ecran li::marker {
      color: var(--club-principale, #39449f); }

/*  Les pages livrées avec le produit, sur l'écran des pages du club.
    Une case par page, sa page décochée se lisant comme retirée : le
    site ne la montre plus et son adresse répond « introuvable ».      */
.pages_livrees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 8px;
  margin-bottom: 14px;
  width: 100%; }

.page_livree {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 12px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  cursor: pointer;
  text-align: left;
  /* Le lien « Voir » a quitté l'étiquette : elle commandait la case,
     et cliquer sur le lien retournait la publication au passage.
     L'étiquette porte la case et les deux textes, la rangée porte les
     deux. */
  /* Retirée, la ligne s'éteint : c'est l'état, pas une erreur. */ }
  .page_livree > label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer; }
  .page_livree input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    width: auto; }
  .page_livree .page_livree_nom {
    font-weight: 600;
    font-size: 14px; }
  .page_livree .page_livree_adresse {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 11.5px;
    color: var(--club-texte-doux, #787a86);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .page_livree .btn, .page_livree .puce {
    flex: 0 0 auto;
    margin: 0; }
  .page_livree.page_retiree {
    background-color: var(--club-surface-page, #f7f7f8); }
    .page_livree.page_retiree .page_livree_nom {
      color: var(--club-texte-doux, #787a86); }

/* ======================================================================== */
/*             Deux colonnes : le sommaire et ce qu'il ouvre                */
/* ======================================================================== */
/*  Deux écrans présentaient des dizaines d'entrées à la suite, chacune
    dépliée : vingt-trois modèles de courriels avec leur formulaire, et
    un mode d'emploi de neuf chapitres. Trouver le bon demandait de
    faire défiler quatre mille pixels, et les vingt-deux autres
    restaient ouverts autour de celui qu'on lisait.

    Le sommaire tient une colonne étroite, ce qu'il ouvre tient la
    large. Trente et soixante-dix pour cent : un titre de modèle ou de
    chapitre tient sur une ligne à trois cents pixels, et le texte comme
    le formulaire ont besoin du reste.

    Sous mille pixels, les deux se suivent : le sommaire d'abord, ce
    qu'il ouvre ensuite. Une colonne de cent cinquante pixels ne
    contient plus un titre.                                              */
.colonnes_3070 {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 24px;
  align-items: start; }

.colonne_sommaire {
  position: sticky;
  top: 12px;
  background-color: var(--club-surface-page, #f7f7f8);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  padding: 10px;
  /* Une liste de vingt-trois entrées ne doit pas dépasser l'écran :
     elle défile dans son cadre, la colonne de droite garde le sien. */
  max-height: calc(100vh - 40px);
  overflow-y: auto; }
  .colonne_sommaire .sommaire_titre {
    margin: 2px 6px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--club-texte-doux, #787a86); }
  .colonne_sommaire ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .colonne_sommaire li {
    margin: 0; }
  .colonne_sommaire a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--club-encre, #1b1b1b);
    text-decoration: none;
    border-radius: calc(var(--club-arrondi, 4px) - 1px);
    /* L'entrée ouverte porte un trait, non un fond seul : sur une
       colonne déjà grise, un fond blanc se lit comme un survol. */ }
    .colonne_sommaire a:hover, .colonne_sommaire a:focus {
      background-color: var(--club-fond, #fff); }
    .colonne_sommaire a.actif {
      background-color: var(--club-fond, #fff);
      font-weight: 600;
      box-shadow: inset 3px 0 0 var(--club-principale, #39449f); }
  .colonne_sommaire .marque_entree {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--club-principale, #39449f); }

.colonne_detail {
  min-width: 0;
  /* Le formulaire est en flex : ses paragraphes et ses listes doivent
     prendre la ligne, sinon la dernière phrase et le bouton se
     partagent la largeur et la phrase se lit en colonne étroite. */
  /* Le gabarit borne les zones de texte à quatre-vingt-dix pixels, ce
     qui convient à une note de deux lignes. Un modèle de courriel fait
     quinze lignes : on en voit trois. */ }
  .colonne_detail h4 {
    margin: 0 0 6px;
    text-align: left;
    font-size: 18px; }
  .colonne_detail form {
    max-width: none;
    margin: 0; }
  .colonne_detail > p, .colonne_detail .intro_reglage {
    text-align: left; }
  .colonne_detail form > p, .colonne_detail form > ul {
    width: 100%; }
  .colonne_detail .btn, .colonne_detail button {
    margin-left: 0;
    margin-right: 0; }
  .colonne_detail form > button {
    flex: 0 0 auto;
    margin-top: 12px; }
  .colonne_detail textarea {
    min-height: 280px; }

@media (max-width: 1000px) {
  .colonnes_3070 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px; }

  .colonne_sommaire {
    position: static;
    max-height: 320px; } }
/* ------------------------------------------------------------------
   Deux classes que le HTML posait et qu'aucune feuille ne définissait

   « titre_chapitre » titre onze chapitres du Mode d'emploi, et
   « compte » porte deux choses : le nombre de réglages d'une section
   de la Configuration, et la mention « réservé au superadministrateur »
   à côté de deux titres du Mode d'emploi. Ni l'une ni l'autre n'était
   déclarée nulle part : les compteurs tombaient dans le titre à la
   même taille et la même couleur que lui, et se lisaient comme une
   partie du texte. Un « (12) » collé à « Apparence » ne dit pas la
   même chose selon qu'il est en gros noir ou en petit gris.
   ------------------------------------------------------------------ */
.titre_chapitre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  text-align: left; }

.compte {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--club-texte-doux, #787a86);
  text-transform: none; }

/* Dans un sommaire, le compteur se range à droite de l'entrée. */
.colonne_sommaire a .compte,
.sommaire_admin a .compte {
  margin-left: auto;
  padding-left: 8px; }

/*  Les conditions d'annulation, telles que le club les écrit. Un
    encadré et non une phrase perdue au-dessus de la liste : c'est ce
    qu'on lit avant d'appuyer sur « Annuler ».                          */
.conditions_annulation {
  max-width: 680px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  background-color: var(--club-info-fond, #e8f1f9);
  border: 1px solid var(--club-info-trait, #c6dcee);
  border-radius: var(--club-arrondi, 4px); }
  .conditions_annulation h4 {
    margin: 0 0 4px;
    font-size: 14px;
    text-align: left;
    color: var(--club-info, #1f5b8f); }
  .conditions_annulation p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: left; }

/*  Les inscriptions hebdomadaires, dans « Mes séances ».

    Une série se dit en une ligne, avec ce qu'il en reste, et s'arrête
    d'un bouton. Le bloc reprend le dessin des conditions d'annulation,
    dans la teinte neutre : c'est une information, pas un avertissement. */
.series_hebdo {
  max-width: 680px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  background-color: var(--club-surface-page, #f7f7f8);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px); }
  .series_hebdo h4 {
    margin: 0 0 4px;
    font-size: 14px;
    text-align: left;
    color: var(--club-principale, #39449f); }
  .series_hebdo .serie_hebdo {
    padding: 10px 0 12px;
    border-top: 1px solid var(--club-ligne, #e2e2e2); }
    .series_hebdo .serie_hebdo:first-of-type {
      border-top: 0; }
  .series_hebdo .serie_phrase {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left; }
    .series_hebdo .serie_phrase small {
      display: block;
      color: var(--club-texte-doux, #787a86); }
  .series_hebdo .serie_note {
    margin: 0 0 8px;
    text-align: left;
    line-height: 1.4;
    color: var(--club-texte-doux, #787a86); }
  .series_hebdo form {
    margin: 0; }
  .series_hebdo .btn {
    margin: 0; }

/*  La série qui vient d'être posée : ses dates, et les semaines
    sautées, en deux listes courtes plutôt qu'en une phrase.            */
.serie_detail {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 14px 18px;
  text-align: left;
  background-color: var(--club-surface-page, #f7f7f8);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px); }
  .serie_detail .serie_titre {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--club-principale, #39449f); }
    .serie_detail .serie_titre + .serie_dates {
      margin-bottom: 12px; }
  .serie_detail .serie_dates {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px; }
    .serie_detail .serie_dates li {
      font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
      font-size: 13.5px;
      color: var(--club-encre, #1b1b1b); }
  .serie_detail .serie_sautees li {
    color: var(--club-texte-doux, #787a86); }
    .serie_detail .serie_sautees li small {
      font-family: inherit;
      font-size: 12px; }

/*  La case « chaque semaine » du récapitulatif de réservation : le
    petit texte sous l'intitulé dit combien de séances seront prises
    et lesquelles ne le seront pas, avant de cocher.                    */
form fieldset.fieldset_checkbox.choix_hebdo label p small {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
  color: var(--club-texte-doux, #787a86); }

/*  Sans abonnement, le chemin vers la page qui en vend un.             */
.recap_abonnement .lien_abonnement {
  font-weight: 600; }

/*  Le calendrier des fermetures du club.

    Les jours fermés ne sont pas des jours « choisis » : ce sont des
    jours où le club n'ouvre pas. Ils portent donc le rouge de ce que le
    produit signale, et leur chiffre est barré, pour que la fermeture se
    lise même sans distinguer la couleur.

    Le calendrier de l'infobulle, lui, garde la teinte du club : ce
    n'est pas la même chose de choisir une date et d'en fermer une.     */
.calendrier_fermetures {
  /* Le champ ne disparaît qu'une fois le calendrier posé : là où le
     script ne tourne pas, il reste le seul moyen d'écrire une
     fermeture. */
  /* Le calendrier et la liste côte à côte : le premier sert à poser
     une fermeture, la seconde à les voir toutes. Le calendrier ne
     montre qu'un mois. */ }
  .calendrier_fermetures .datepicker-inline {
    width: auto;
    max-width: 340px; }
  .calendrier_fermetures .datepicker-inline .datepicker {
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px);
    box-shadow: none; }
  .calendrier_fermetures .datepicker--day-name {
    color: var(--club-texte-doux, #787a86); }
  .calendrier_fermetures .datepicker--cell.-current- {
    color: var(--club-principale, #39449f);
    font-weight: 700; }
  .calendrier_fermetures .datepicker--cell.-selected-,
  .calendrier_fermetures .datepicker--cell.-selected-.-current-,
  .calendrier_fermetures .datepicker--cell.-selected-.-focus- {
    background: var(--club-alerte-fond, #fbeaea);
    color: var(--club-alerte, #a32b2b);
    text-decoration: line-through;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--club-alerte-trait, #efc9c9); }
  .calendrier_fermetures.calendrier_pose .date_indisponible {
    display: none; }
  .calendrier_fermetures .fermetures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px; }
  .calendrier_fermetures .liste_fermetures {
    flex: 1 1 220px;
    min-width: 0;
    max-height: 272px;
    overflow-y: auto;
    padding: 10px 12px;
    background-color: var(--club-surface-page, #f7f7f8);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px);
    /* Une fermeture passée ne se supprime pas toute seule : elle
       reste enregistrée, et se lit comme du passé. */ }
    .calendrier_fermetures .liste_fermetures .sommaire_titre {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 6px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--club-texte-doux, #787a86); }
    .calendrier_fermetures .liste_fermetures .compteur_fermetures {
      font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
      font-size: 11px;
      padding: 1px 7px;
      border-radius: 999px;
      color: var(--club-alerte, #a32b2b);
      background-color: var(--club-alerte-fond, #fbeaea);
      border: 1px solid var(--club-alerte-trait, #efc9c9); }
    .calendrier_fermetures .liste_fermetures ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    .calendrier_fermetures .liste_fermetures li {
      margin: 0;
      padding: 3px 0;
      font-size: 13.5px;
      color: var(--club-encre, #1b1b1b);
      border-bottom: 1px solid var(--club-ligne, #e2e2e2); }
      .calendrier_fermetures .liste_fermetures li:last-child {
        border-bottom: none; }
    .calendrier_fermetures .liste_fermetures li.fermeture_passee {
      color: var(--club-texte-doux, #787a86);
      text-decoration: line-through; }
    .calendrier_fermetures .liste_fermetures .aucune_fermeture {
      margin: 0;
      font-size: 13.5px;
      color: var(--club-texte-doux, #787a86); }

/*  L'état du dernier enregistrement de la feuille de séance. Il prend
    la place du bouton, qui ne sert plus qu'aux navigateurs sans
    JavaScript : dire « enregistré à 19h04 » vaut mieux qu'un bouton
    dont on ne sait pas s'il a déjà été pressé.                           */
.etat_pointage {
  margin: 0;
  align-self: center;
  font-size: 13px;
  color: var(--club-texte-doux, #787a86); }
  .etat_pointage.etat_ok {
    color: var(--club-succes, #1b7a4b); }
  .etat_pointage.etat_erreur {
    color: var(--club-alerte, #a32b2b);
    font-weight: 600; }

/* La liste d'origine reste dans le formulaire et part au serveur ; elle
   ne s'affiche plus. Son « required » a été déplacé sur le champ visible
   par le script : un champ obligatoire et caché bloque l'envoi sans rien
   dire. */
.select_remplace {
  display: none; }

.choix_liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  box-shadow: 0 8px 24px rgba(31, 31, 31, 0.12);
  /* La proposition sous le curseur ou sous la flèche du clavier : la
     même marque pour les deux, sans quoi on ne sait plus laquelle
     « Entrée » choisit. */ }
  .choix_liste li {
    padding: 7px 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--club-encre, #1b1b1b);
    border-radius: calc(var(--club-arrondi, 4px) - 1px);
    cursor: pointer;
    /* Un nom long ne doit pas élargir la liste au-delà du champ. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .choix_liste li.choix_actif, .choix_liste li[role="option"]:hover {
    background-color: var(--club-principale-claire, #efb7b8);
    color: var(--club-principale-fonce, #851e20); }
  .choix_liste li.choix_rien {
    color: var(--club-texte-doux, #787a86);
    cursor: default;
    font-style: italic; }

/* ---------------------------------------------------------------------- */
/*  6. Les grands écrans                                                   */
/* ---------------------------------------------------------------------- */
/*  Le contenu s'arrêtait à mille deux cent quarante pixels, quelle que
    soit la largeur de l'écran. Sur un vingt-sept pouces, mille
    quarante-huit pixels de gris restaient à droite : un quart de
    l'écran servait, le reste attendait. Les tableaux se comprimaient et
    les grilles de cartes gardaient trois colonnes là où il en tenait
    six.

    La largeur monte donc par paliers, jusqu'à mille neuf cents pixels.
    Elle ne monte pas plus haut : au-delà, l'œil parcourt une ligne de
    tableau d'un bord de l'écran à l'autre et perd la ligne en route.
    Les textes suivis, eux, ne s'élargissent pas du tout : leur mesure
    est bornée ailleurs, à six cent quatre-vingts pixels, et c'est la
    longueur de ligne qui décide de cela, pas la place disponible.       */
@media (min-width: 1500px) {
  body:not(#page_accueil):not(#page__en_construction) .container {
    max-width: 1440px; } }
@media (min-width: 1800px) {
  body:not(#page_accueil):not(#page__en_construction) .container {
    max-width: 1660px; } }
@media (min-width: 2100px) {
  body:not(#page_accueil):not(#page__en_construction) .container {
    max-width: 1900px; } }
/*  La taille du doigt, sur les écrans tactiles.

    Les champs et les boutons du produit font de trente à quarante et
    un pixels de haut. C'est confortable à la souris, où le pointeur
    vise au pixel ; c'est sous le seuil qu'un doigt demande, et la
    vérification le mesurait sans pouvoir le corriger : porter tous les
    contrôles à quarante-quatre pixels change la hauteur de chaque
    ligne de tableau et de chaque formulaire sur un écran large, ce qui
    est une décision de densité et non une correction.

    Elle ne se pose que sur les petits écrans. En dessous de la largeur
    d'une tablette, la densité ne sert plus à rien : il n'y a pas
    trente lignes à l'écran, et c'est là qu'on touche du doigt.       */
@media (max-width: 900px) {
  /* La barre d'onglets et les boutons hors section : ils sont dans le
     gabarit, pas dans le contenu, et échappaient à la règle
     ci-dessous, qui ne parle que de « section ». */
  .onglet, .barre_onglets a,
  .btn, button, header nav a, #page_accueil nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center; }

  /* Les entrées d'un sommaire en colonne : elles sont dans le
     contenu, mais la règle « section a » n'existe pas, et il ne faut
     surtout pas la poser, sans quoi chaque lien d'une phrase
     deviendrait un pavé de quarante-quatre pixels. */
  .colonne_sommaire a {
    min-height: 44px; }

  /* Le sommaire de l'écran d'administration : huit pastilles qui
     mènent chacune à une section de la page. */
  .sommaire_admin a {
    min-height: 44px;
    display: inline-flex;
    align-items: center; }

  section {
    /* Un bouton n'est pas un bloc de texte : sa hauteur minimale ne
       doit pas décaler son intitulé vers le haut. */
    		/* Une dizaine de hauteurs fixes sont posées ailleurs dans cette
    		   feuille, champ par champ et écran par écran, avec des
    		   sélecteurs plus lourds que ceux d'ici. Les reprendre une à une
    		   demanderait de les rouvrir toutes et d'y ajouter une condition
    		   de largeur, ce qui déplacerait le problème sans le fermer.
    
    		   « important » est employé ici, et seulement ici : la règle est
    		   bornée à un seul point de rupture, elle ne fixe qu'un plancher,
    		   et ce plancher est une contrainte physique, la taille d'un
    		   doigt, non un choix d'apparence. */
    /* La règle qui les dessine porte une classe, donc plus de poids
       que « section input » : elle est nommée ici. */ }
    section input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    section select,
    section textarea,
    section button,
    section .btn,
    section a.btn {
      min-height: 44px !important; }
    section button, section .btn, section a.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center; }
    section input[type="date"], section input[type="time"],
    section label.case_reglage, section .colonne_presence label,
    section label:has(input[type="checkbox"]), section label:has(input[type="radio"]) {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 8px; }
    section input[type="checkbox"], section input[type="radio"],
    section .case_reglage input[type="checkbox"], section .case_reglage input[type="radio"],
    section fieldset input[type="checkbox"], section fieldset input[type="radio"] {
      width: 22px !important;
      height: 22px !important; } }
/* ---------------------------------------------------------------------- */
/*  7. Les petits écrans                                                   */
/* ---------------------------------------------------------------------- */
/*  Entre la largeur du rail et celle d'un téléphone, le contenu se
    resserre sans que la colonne ne bouge.                                 */
@media (max-width: 1080px) {
  body:not(#page_accueil):not(#page__en_construction) footer, body:not(#page_accueil):not(#page__en_construction) header.left_header {
    width: 248px; }
  body:not(#page_accueil):not(#page__en_construction) .container {
    width: auto;
    max-width: none;
    margin: 16px 16px 24px 264px; }

  .barre_ecran {
    margin-left: 248px;
    padding: 10px 16px; } }
/*  Sous huit cents pixels, la colonne cesse d'être une colonne : elle
    devient un bandeau replié en haut de page. La feuille le faisait déjà
    pour la colonne claire ; le bandeau reprend les couleurs du rail, et
    la barre d'écran retrouve toute la largeur.                            */
@media (max-width: 800px) {
  body:not(#page_accueil):not(#page__en_construction) {
    		/* Le bandeau replié cachait toute la liste, et avec elle le
    		   bouton « Réserver », qui en est la première entrée : sur un
    		   téléphone, l'action quotidienne disparaissait tandis que
    		   « Réserver un événement », geste occasionnel, restait
    		   visible parce qu'il vit hors de la liste.
    
    		   La liste reste affichée, et ce sont ses entrées qui se
    		   replient : la première, celle qui porte le bouton et le
    		   formulaire de recherche, demeure. */
    /* La première entrée qui demeure est celle du menu du compte,
       qui porte le bouton de réservation. Sur une page publique, la
       première entrée est « Accueil » : la garder laissait une
       entrée seule sous le bouton « Menu », sans les autres. */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header {
      width: auto;
      margin: 0;
      padding: 12px 0 8px;
      border-right: none;
      border-bottom: 1px solid var(--club-rail-trait, #4c4c4c);
      opacity: 1; }
    body:not(#page_accueil):not(#page__en_construction) footer {
      width: auto;
      margin: 0;
      padding: 16px;
      border-right: none;
      border-top: 1px solid var(--club-rail-trait, #4c4c4c); }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club {
      width: 132px;
      margin: 0 auto 8px;
      padding: 6px 8px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_discover {
      padding-bottom: 10px;
      font-size: 14px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .menu_colonne {
      display: block; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header:not(.menu_ouvert) nav[aria-label="Menu du compte"] .sous_menu > li:not(:first-child),
    body:not(#page_accueil):not(#page__en_construction) header.left_header:not(.menu_ouvert) nav[aria-label="Menu du site"] .sous_menu > li {
      display: none; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header .sous_menu {
      max-height: none;
      overflow: visible;
      padding-bottom: 0; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header #btn_reserver {
      margin: 0 16px 10px; }
    body:not(#page_accueil):not(#page__en_construction) .container {
      width: auto;
      max-width: none;
      margin: 14px 16px 24px; }

  .barre_ecran {
    margin-left: 0;
    padding: 9px 16px;
    /* Sur un téléphone, le nom de l'écran est ce qui compte : le
       chemin et le rôle passent après, et la ligne ne se coupe pas
       en deux étages pour eux. */ }
    .barre_ecran .fil_groupe, .barre_ecran .fil_separateur {
      display: none; } }
@media (max-width: 600px) {
  body:not(#page_accueil):not(#page__en_construction) .container {
    margin: 12px; }

  .barre_ecran {
    padding: 8px 12px;
    font-size: 12.5px;
    		/*  LE RÔLE NE DISPARAÎT PAS, IL SE RÉDUIT.
    
    		    « display: none » l'effaçait sous 600 px, c'est-à-dire sur tous
    		    les téléphones. Or c'est la seule chose, sur ces écrans, qui
    		    dise depuis quel compte on regarde — et le produit en a trois,
    		    dont deux voient les mêmes écrans avec des droits différents.
    		    Un encadrant et un gérant lisent la même barre ; s'ils
    		    partagent un poste, rien ne les distingue.
    
    		    Le mot cède la place à sa première lettre, dans une puce ronde,
    		    et le mot entier reste pour les aides techniques. La lettre est
    		    posée en CSS d'après une classe, et non en HTML : le libellé
    		    complet doit rester dans le document.                          */
    /* Le courriel d'un membre sans nom peut être long : il se
       coupe plutôt que de pousser la barre hors de l'écran. */ }
    .barre_ecran .fil_role {
      overflow: hidden;
      width: 22px;
      height: 22px;
      padding: 0;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* Le mot part hors de la puce ; ::before le remplace. */
      text-indent: -999em;
      position: relative;
      background-color: var(--club-principale-claire, #eef0fc);
      border-color: var(--club-principale-claire, #eef0fc);
      color: var(--club-principale-fonce, #232c6b); }
    .barre_ecran .fil_role::before {
      content: attr(data-initiale);
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-indent: 0;
      font-size: 12px;
      font-weight: 700; }
    .barre_ecran .fil_nom {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 46vw; }

  #page_compte section {
    padding: 16px 14px; }

  .entete_seance .btn {
    padding: 8px 14px; } }
/* ======================================================================== */
/*                       Clarté et couleur                                  */
/* ======================================================================== */
/*  La direction « Atelier » a donné à l'espace membre sa densité et son
    cadre. Il lui manquait ce qui rend une interface lisible d'un coup
    d'œil : de la couleur qui veut dire quelque chose, des états qui se
    voient, et des écrans vides qui disent quoi faire au lieu de ne rien
    dire.

    Trois principes tiennent ce bloc :

    - la couleur du club dit l'identité et l'action ; les couleurs
      d'état disent l'état, et ne suivent pas la marque, sans quoi un
      club au rouge verrait ses paiements réglés dans la teinte de ses
      retards ;
    - une pastille remplace un texte coloré : un mot bleu qui ne se
      clique pas est une promesse non tenue ;
    - un écran sans données dit ce qu'il attend, et propose le geste
      qui le remplirait.                                                    */
/* ---------------------------------------------------------------------- */
/*  1. La pastille                                                         */
/* ---------------------------------------------------------------------- */
/*  Une catégorie, un rôle, un état, un format de fichier. Fond très pâle,
    encre foncée : elle se pose sur une ligne de tableau sans l'écraser,
    et son texte garde un contraste de plus de sept pour un.                */
/*  L'état d'un membre devant une réservation.
    Les mêmes pastilles sur trois écrans, une seule règle. */
.etats_reservation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
}

.puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  /*  UNE PASTILLE NE TIENT PAS TOUJOURS SUR UNE LIGNE.

      « nowrap » est la bonne règle par défaut : « Réglé », « Payé »,
      « 12 séances à votre solde » se coupent mal. Mais certaines
      portent une phrase entière — « Affiliation en ordre jusqu'au
      13-09-2027 » fait quatre cent quatorze pixels — et, posées sur un
      téléphone de trois cent quatre-vingt-dix, elles sortaient de la
      page et la faisaient défiler de travers TOUT ENTIÈRE.

      Elle ne se coupe donc que lorsqu'elle n'a pas le choix : jamais
      au-dessus de la largeur qu'on lui donne.                        */
  white-space: nowrap;
  max-width: 100%;
  vertical-align: baseline;
  /* Les teintes par défaut : l'écran les remplace par les siennes,
     posées en propriétés d'élément d'après la catégorie. */
  color: var(--puce-encre, var(--club-neutre, #525667));
  background-color: var(--puce-fond, var(--club-neutre-fond, #f0f1f4));
  /* Le trait. Sans lui, une pastille au fond très pâle posée sur une
     ligne de tableau grisée disparaissait : les deux clartés se
     valent, et la colonne des certificats montrait une ligne sur deux
     sans pastille. */
  border: 1px solid var(--puce-trait, var(--club-neutre-trait, #dddfe6)); }

/*  Les états nommés. Ils ne prennent pas de propriété d'élément : leur
    sens est fixe, et un écran ne choisit pas la couleur de « impayé ».   */
.puce_succes {
  color: var(--club-succes, #1b7a4b);
  background-color: var(--club-succes-fond, #e7f4ec);
  border-color: var(--club-succes-trait, #bfe0cd); }

.puce_attention {
  color: var(--club-attention, #8a5a08);
  background-color: var(--club-attention-fond, #fbf1df);
  border-color: var(--club-attention-trait, #ebd8b0); }

.puce_alerte {
  color: var(--club-alerte, #a32b2b);
  background-color: var(--club-alerte-fond, #fbeaea);
  border-color: var(--club-alerte-trait, #efc9c9); }

.puce_info {
  color: var(--club-info, #1f5b8f);
  background-color: var(--club-info-fond, #e8f1f9);
  border-color: var(--club-info-trait, #c6dcee); }

.puce_neutre {
  color: var(--club-neutre, #525667);
  background-color: var(--club-neutre-fond, #f0f1f4);
  border-color: var(--club-neutre-trait, #dddfe6); }

/*  Le point qui précède un état : il double la couleur par une forme,
    pour qui ne distingue pas le vert du rouge.                            */
.puce_succes::before, .puce_attention::before, .puce_alerte::before,
.puce_info::before, .puce_neutre::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 6px; }

/*  Une pastille qui porte un montant ou un compte garde ses chiffres
    alignés sur ceux des lignes voisines.                                  */
.puce_chiffre {
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-weight: 500; }

/* ---------------------------------------------------------------------- */
/*  2. L'écran sans données                                                */
/* ---------------------------------------------------------------------- */
/*  « Aucune séance n'est programmée actuellement. » posé seul au milieu
    d'une carte de mille pixels : le membre ne sait pas si l'écran est
    vide, cassé, ou en train de charger. Un écran vide se compose comme
    les autres : un signe, une phrase, et le geste qui le remplirait.      */
.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 34px 20px;
  margin: 4px 0 0;
  background-color: var(--club-surface-page, #f2f2f2);
  border: 1px dashed var(--club-ligne, #e2e2e2);
  border-radius: calc(var(--club-arrondi, 4px) * 2); }
  .vide .vide_signe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e2e2e2);
    color: var(--club-texte-doux, #787a86); }
    .vide .vide_signe svg {
      display: block; }
  .vide .vide_phrase {
    margin: 0;
    max-width: 46ch;
    font-size: 14.5px;
    color: var(--club-texte, #161a2e); }
  .vide .vide_precision {
    margin: 0;
    max-width: 52ch;
    font-size: 12.5px;
    color: var(--club-texte-doux, #787a86); }
  .vide .btn {
    margin: 4px auto 0 !important; }

/*  Un bloc vide logé dans un panneau gris faisait deux cadres emboîtés,
    l'un plein et l'autre pointillé, pour une seule phrase.               */
/*  L'ÉTAT VIDE NE SE MET PAS DANS UNE BOÎTE QU'IL REMPLIT DÉJÀ.

    « .vide » dit qu'il n'y a rien à montrer : un signe, une phrase, et
    parfois la façon d'y remédier. Il porte pour cela un fond gris et
    un filet pointillé, ce qui convient quand il prend PLACE dans un
    écran — au milieu d'une liste, sous un tableau.

    Quand il est le seul contenu de sa carte, il ne prend plus place :
    il la remplit. La carte a déjà un fond, un arrondi et une ombre ;
    la boîte pointillée en dessine une seconde, aux mêmes dimensions à
    quarante pixels près. Deux cadres concentriques autour d'une phrase
    qui dit « il n'y a rien ».

    Les deux premiers cas étaient déjà traités. Le troisième — la carte
    elle-même — manquait, et c'est le plus fréquent : le tableau de
    bord en montrait deux, les impayés un, la boutique un.           */
.bloc_text > .vide, .slide_form > .vide,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .vide:only-child,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .vide:last-child {
  background-color: transparent;
  border: none;
  padding: 20px 0; }

/* ---------------------------------------------------------------------- */
/*  3. Les grilles                                                         */
/* ---------------------------------------------------------------------- */
/*  Trois documents empilés en colonne de cinq cents pixels au milieu
    d'une carte de mille cent : le reste de la carte ne servait à rien.
    Une liste courte d'objets de même nature se range en grille.           */
/*  Une grille peut être une liste : la page de l'équipe présente des
    personnes, et « liste de trois éléments » est ce qu'un lecteur
    d'écran doit annoncer. La puce et le retrait de liste n'ont alors
    pas lieu d'être, la grille posant déjà la mise en page.             */
.grille > li {
  list-style: none; }

ul.grille {
  padding-left: 0; }

.grille {
  display: grid;
  gap: 12px;
  /* « min(240px, 100%) » et non « 240px » : sur un téléphone de trois
     cent vingt pixels, une colonne d'un minimum ferme de trois cents
     déborde de la place disponible, et la page entière se décale. Le
     minimum cède devant la largeur du conteneur. */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  margin: 4px 0 0; }
  .grille.grille_large {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .grille.grille_etroite {
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }

/*  Une tuile de grille : le même langage que les cartes, en plus petit. */
.tuile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: calc(var(--club-arrondi, 4px) * 2);
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out; }
  .tuile .tuile_titre {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--club-texte, #161a2e); }
  .tuile .tuile_valeur {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 18px;
    font-weight: 500; }
  .tuile .tuile_note {
    font-size: 12px;
    color: var(--club-texte-doux, #787a86); }

a.tuile:hover, a.tuile:focus {
  border-color: var(--club-principale, #39449f);
  box-shadow: 0 1px 3px rgba(31, 31, 31, 0.08); }

/*  Le pied d'une tuile : la pastille du format et sa précision, sur une
    ligne, séparées de son titre.                                          */
.tuile_bas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px; }
  .tuile_bas .tuile_note {
    font-size: 11.5px; }

/*  Une tuile de document reste lisible en noir : le titre ne prend pas
    la couleur du lien, la teinte est portée par la pastille.              */
.tuile_document {
  color: var(--club-texte, #161a2e); }
  .tuile_document:hover, .tuile_document:focus {
    color: var(--club-texte, #161a2e); }

/*  L'adresse qu'un membre partage pour être parrainé : un intitulé, la
    valeur, et de quoi la lire sans se tromper d'un caractère.            */
.adresse_partage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background-color: var(--club-info-fond, #e8f1f9);
  border: 1px solid var(--club-info-trait, #c6dcee);
  border-radius: calc(var(--club-arrondi, 4px) * 2);
  width: fit-content;
  max-width: 100%; }
  .adresse_partage .adresse_partage_intitule {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--club-info, #1f5b8f); }
  .adresse_partage .adresse_partage_valeur {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 15px;
    font-weight: 500;
    word-break: break-all;
    color: var(--club-texte, #161a2e); }

/*  Le titre d'un bloc sur une page publique. « Quels sont nos horaires ? »
    était un paragraphe en gras coloré : pour un moteur de recherche comme
    pour un lecteur d'écran, la page n'avait qu'un titre.                  */
.titre_bloc {
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  color: var(--club-texte, #161a2e);
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--club-ligne, #e2e2e2); }

/*  La carte d'un jour d'horaire : le jour en tête, ses cours dessous.    */
.jour_horaire {
  gap: 6px;
  /* La règle du gabarit compose tout « span » imbriqué dans un
     paragraphe en exergue serif italique : le nom d'un cours s'écrivait
     en italique de titre au milieu de son horaire. */
  /* Deux cours d'un même jour se suivent : la marge basse héritée du
     paragraphe les séparait d'une ligne vide. */ }
  .jour_horaire .jour_nom {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--club-principale, #39449f); }
  .jour_horaire .cours_jour {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5; }
  .jour_horaire .cours_heure {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 12.5px;
    color: var(--club-texte-doux, #787a86);
    white-space: nowrap; }
  .jour_horaire .cours_heure, .jour_horaire .cours_nom {
    display: inline;
    margin: 0;
    font-family: inherit;
    font-style: normal;
    text-align: left; }
  .jour_horaire .cours_heure {
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace); }
  .jour_horaire .cours_nom {
    font-weight: 500; }
  .jour_horaire p.cours_jour {
    margin: 0; }
  .jour_horaire small {
    font-size: 12px;
    color: var(--club-texte-doux, #787a86);
    font-style: normal; }

/* ======================================================================== */
/*                        Les surfaces                                      */
/* ======================================================================== */
/*  Trois gris se disputaient l'écran : celui de la page, celui des cartes
    blanches, et celui des panneaux « bloc_text » posés dedans. Un panneau
    gris dans une carte blanche sur une page grise fait trois plans pour
    deux niveaux d'information.

    Il n'en reste que deux : la page est grise, tout ce qui porte de
    l'information est blanc et bordé. Ce qui distingue un panneau d'une
    carte est son trait, non sa teinte.                                    */
#page_compte {
  /*  Le panneau déplié sous une ligne de liste garde son fond gris : il
      est DANS la ligne, et c'est ce gris qui dit qu'il en dépend.       */
  /*  Le signe d'un écran vide prend la couleur du club : une touche,
      là où l'œil arrive en premier quand il n'y a rien à lire.         */ }
  #page_compte section {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04), 0 1px 3px rgba(31, 31, 31, 0.03); }
  #page_compte .bloc_text {
    background-color: var(--club-fond, #fff);
    border-radius: 8px; }
  #page_compte .slide_form {
    background-color: var(--club-surface-page, #f2f2f2); }
  #page_compte .vide {
    border-radius: 10px; }
  #page_compte .vide .vide_signe {
    color: var(--club-principale, #39449f);
    border-color: var(--club-principale-claire, #efb7b8);
    background-color: var(--club-fond, #fff); }
  #page_compte .tuile {
    border-radius: 10px; }

/* ======================================================================== */
/*                        La barre d'onglets                                */
/* ======================================================================== */
/*  Vingt-six entrées se suivaient dans la colonne, dont la moitié passait
    sous la ligne de flottaison : il fallait faire défiler la navigation
    pour trouver la navigation. Les écrans qui traitent d'une même chose se
    rejoignent ici, sous l'entrée qui les mène.

    La barre se colle sous celle qui nomme l'écran : sur une liste de
    quarante membres, on sait encore de quel groupe on lit un onglet.     */
.onglets {
  position: sticky;
  top: 41px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: 248px;
  padding: 0 24px;
  background-color: var(--club-fond, #fff);
  border-bottom: 1px solid var(--club-ligne, #e2e2e2); }

.onglet {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--club-texte-doux, #787a86);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  -moz-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -webkit-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -ms-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
  .onglet:hover, .onglet:focus {
    color: var(--club-texte, #161a2e);
    border-bottom-color: var(--club-ligne, #e2e2e2); }

/*  L'onglet ouvert porte le trait de la couleur du club. Le poids seul ne
    suffisait pas : sur une barre de quatre onglets, un demi-gras de plus
    ne se voit pas d'un coup d'œil.                                       */
.onglet_actif {
  color: var(--club-principale, #39449f);
  border-bottom-color: var(--club-principale, #39449f); }
  .onglet_actif:hover, .onglet_actif:focus {
    color: var(--club-principale, #39449f);
    border-bottom-color: var(--club-principale, #39449f); }

/*  Le conteneur qui suit une barre d'onglets se rapproche d'elle : la
    marge qui l'écartait de la barre d'écran ferait deux fois le même
    blanc.                                                                 */
.container_onglets {
  margin-top: 14px !important; }

@media (max-width: 1080px) {
  .onglets {
    margin-left: 248px;
    padding: 0 16px; } }
/*  Sous huit cents pixels, la colonne devient un bandeau : la barre
    reprend toute la largeur. Elle défile en elle-même plutôt que de
    s'empiler sur trois lignes, et le trait de l'onglet ouvert reste
    visible pendant qu'on la fait glisser.                                 */
@media (max-width: 800px) {
  .onglets {
    margin-left: 0;
    padding: 0 12px;
    		/* La barre d'onglets se colle SOUS celle qui nomme l'écran, ici
    		   comme au-dessus de 800 px.
    
    		   Elle se collait à zéro, comme la barre d'écran, qui porte un
    		   z-index supérieur : dès qu'on faisait défiler une liste, les
    		   onglets glissaient derrière elle et disparaissaient. Sur un
    		   téléphone, où la liste est longue et le défilement constant,
    		   on perdait donc le seul repère qui dit quel groupe on lit.
    
    		   Quarante pixels, et non quarante et un : la barre d'écran est
    		   moins haute ici, son remplissage passant de 11 à 10 pixels. */
    top: 40px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; }
    .onglets::-webkit-scrollbar {
      display: none; }

  .onglet {
    padding: 11px 12px 10px; } }
/* ======================================================================== */
/*                        Le focus, rendu visible                           */
/* ======================================================================== */
/*  « *:focus { outline: none } » retirait tout repère de focus sur
    l'ensemble du produit. Qui navigue au clavier ne savait jamais où il
    se trouvait : ni dans un formulaire, ni dans un menu, ni dans une
    liste de membres.

    Le repère revient, et seulement pour le clavier : :focus-visible ne
    s'applique pas à un clic de souris. Il reprend la couleur du club,
    avec un écart qui le détache du champ qu'il entoure.                    */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  	/* Le repère est une ombre portée, non un contour : les boutons et
  	   les champs du produit ne rendent aucun contour, quelle que soit la
  	   priorité qu'on lui donne, tandis que l'ombre se dessine partout.
  
  	   Deux anneaux : le premier de la couleur du fond, qui détache le
  	   second du bord de l'élément, le second de la couleur du club. */
  box-shadow: 0 0 0 2px var(--club-fond, #fff), 0 0 0 5px var(--club-principale-vive, #d74f51);
  outline: none; }

/* ======================================================================== */
/*                     Le voile des cartes d'album                          */
/* ======================================================================== */
/*  Le titre d'un album est écrit en blanc sur la vignette, sur un dégradé
    censé le porter. Ce dégradé ne commençait à s'assombrir qu'à 35 % de la
    hauteur de la carte et n'atteignait 0,72 qu'au tout dernier pixel : au
    milieu du titre, le voile ne valait plus que 0,17 à 320 px de large et
    0,31 à 390. Sur une photo blanche le titre sortait donc à 1,50 pour un.
    Les photos de la démonstration sont sombres, la panne ne s'y voyait pas.

    Le contenu de la carte est calé en bas : quelle que soit la hauteur de
    la carte, le milieu du titre se trouve à quarante-sept pixels du bas.
    Le voile se mesure donc en pixels depuis le bas, et non en pourcentage
    d'une hauteur qui varie du simple au triple selon la largeur d'écran.
    Il reste transparent en haut : la photo garde sa part de la carte.

    La règle vit ici et non avec les autres règles de la galerie, qui sont
    dans le bloc <style> de l'en-tête : celui-ci est chargé après
    style.css, et « body » lui donne le poids qui manquait pour passer
    devant, sans recourir à !important.                                    */
body .flex_gallerie > div.carte_album a {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0, rgba(0, 0, 0, 0.78) 72px, rgba(0, 0, 0, 0) 130px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.55); }

/*  Sauf dans la colonne de navigation. Les entrées du menu occupent toute
    la largeur de « .sous_menu », qui défile en lui-même : les cinq pixels
    de l'ombre à gauche et à droite étaient coupés par le cadre de
    défilement, et du repère il ne restait que deux traits horizontaux.
    Mesure : le lien va de 0 à 247, le conteneur de 0 à 247 ; sur les 24
    arrêts de tabulation de la colonne, 22 avaient leur repère rogné des
    deux côtés et un vingt-troisième n'en portait aucun.

    Élargir les liens n'est pas possible sans défaire le bandeau pleine
    largeur de l'entrée ouverte, et retirer le défilement rendrait la
    colonne plus haute que l'écran. Le repère se dessine donc à
    l'intérieur : un contour à décalage négatif, entièrement visible
    quel que soit le cadre qui le porte. Il reprend l'accent de la
    colonne, qui est tenu contre elle par palette_rail.

    « #btn_reserver » garde l'ombre : ses seize pixels de marge la
    laissaient déjà entière, et c'est le seul aplat de la colonne.        */
header.left_header .sous_menu a:not(#btn_reserver):focus-visible,
header.left_header .sous_menu input:focus-visible,
header.left_header .sous_menu button:focus-visible,
header.left_header .sous_menu select:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--club-rail-accent, #8d93c1);
  outline-offset: -3px; }

/* ======================================================================== */
/*     CE QUE L'EN-TÊTE POSAIT EN LIGNE, ET QUI NE DÉPENDAIT DE RIEN        */
/* ======================================================================== */
/*  includes/header.php portait un bloc <style> de 11 698 octets, réémis
    tel quel dans CHAQUE page servie : 319 lignes dont seules les 34
    premières changeaient d'un club à l'autre, les vingt-huit couleurs de
    sa palette et ses deux piles de polices. Un membre qui ouvrait vingt
    écrans dans une session retéléchargeait vingt fois les mêmes onze
    kilo-octets, alors que cette feuille-ci est mise en cache un mois et
    porte une empreinte de version. C'est aussi ce bloc qui obligeait la
    politique de contenu à admettre 'unsafe-inline'.

    Les règles ci-dessous en viennent, à l'identique. Elles sont posées à
    la FIN de la feuille et dans leur ordre d'origine, pour une raison
    précise : le bloc <style> était chargé APRÈS style.css et l'emportait
    donc à spécificité égale. Rangées ailleurs, celles qui redéfinissent
    une propriété déjà posée plus haut (la police, le fond du pied de
    page, la couleur des boutons) auraient perdu ce rang et le rendu
    aurait changé. La fin du fichier le leur rend exactement.

    Ce qui est RESTÉ dans l'en-tête : la déclaration des variables du
    club, et la hauteur de son logo. Ces deux-là se lisent en base à
    chaque page, aucune feuille compilée ne peut les porter.            */
/*  La police du club. Elle était écrite ici en dur ; le réglage la
    remplace, et le repli garde la pile d'origine.                   */
html, body, input, select, textarea, button {
  font-family: var(--club-police); }

/*  Les deux surfaces claires du gabarit : le panneau qui porte le
    formulaire d'accueil, et le pied de page. Elles étaient blanches
    en dur.                                                          */
.container_home, footer {
  background-color: var(--club-fond);
  color: var(--club-texte); }

/*  Les angles, sur ce qui en a un. « En gelule » se traduit par un
    rayon plus grand que les éléments, que le navigateur ramène a
    leur demi-hauteur.                                               */
.btn, .btn2, input, select, textarea {
  border-radius: var(--club-arrondi); }

/*  Le bouton : sa couleur peut differer de l'accent, un club ayant
    parfois une teinte de marque qui ne convient pas a du texte
    blanc.                                                           */
.btn, .btn2 {
  background: var(--club-bouton);
  color: var(--club-bouton-texte); }

.btn:hover, .btn2:hover {
  background: var(--club-principale-fonce);
  color: var(--club-bouton-texte); }

/*  Le variant secondaire. Sans ces deux règles, celles ci-dessus
    l'emportaient et tous les boutons « blancs » du produit se
    peignaient comme des boutons d'action : plus aucune hierarchie
    entre l'acte principal et le reste.                              */
.btn.btn_white {
  background: var(--club-fond);
  color: var(--club-principale); }

.btn.btn_white:hover, .btn.btn_white:focus {
  background: var(--club-principale-claire);
  color: var(--club-principale-fonce); }

	/*  La page de configuration. Le gabarit ne connait ni les phrases
	    d'aide sous un champ, ni les apercus d'image, ni les cases a
	    cocher hors de leur bloc habituel : sans ces quelques lignes,
	    l'aide s'affiche au fil du texte et la case a cocher s'etire sur
	    toute la largeur, la règle « input { width:100% } » du gabarit
	    s'appliquant a elle.

	    Le gris clair d'usage pour une phrase d'aide ne tient pas ici :
	    les panneaux du gabarit sont un voile blanc a 75 % posé sur la
	    photo de fond, et le texte pale s'y perd des que la photo est
	    claire. L'encre du club, un peu attenuee, reste lisible sur les
	    deux.                                                            */
.aide_reglage {
  display: block;
  margin: 3px 0 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--club-encre); }

.champ_couleur,
input.champ_couleur[type="color"],
input[type="color"].champ_couleur {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  padding: 2px;
  cursor: pointer;
  flex: 0 0 3rem;
  box-sizing: border-box; }

.ligne_couleur {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; }

.ligne_couleur .champ_couleur_texte {
  width: auto;
  min-width: 8rem;
  max-width: 10rem;
  flex: 0 0 auto; }

/*  Les phrases d'introduction d'une section : une par ligne, avec de
    l'air entre elles. Sans marge, l'avertissement sur la cle de
    chiffrement se lisait comme la suite de la phrase précédente.    */
.intro_reglage {
  margin-bottom: 12px;
  line-height: 1.6; }

.intro_reglage:last-child {
  margin-bottom: 0; }

.apercu_reglage img {
  max-height: 90px;
  max-width: 100%;
  display: block;
  margin-bottom: 10px;
  background-color: var(--club-fond); }

/*  « hidden » masque en posant « display: none », et toute règle qui
    donne un display explicite le défait. L'aperçu d'un réglage sans
    image s'affichait donc quand même : une icône d'image cassée
    portant le libellé du champ, juste au-dessus du « Aucune image. »
    censé la remplacer. */
.apercu_reglage img[hidden] {
  display: none; }

/*  La case a cocher et son intitule sur la même ligne. Le gabarit
    pose « input { width:100% } » et l'étiquette en bloc : sans ces
    lignes, la case occupait une ligne pour elle seule et son
    intitule la suivait, sans qu'on voie qu'ils allaient ensemble.   */
.case_reglage {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-transform: none !important;
  font-size: 13px !important;
  margin-top: 10px;
  cursor: pointer; }

.case_reglage input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto; }

/*  « box-shadow: none » portait aussi a l'etat focus, et avec une
    spécificité superieure a celle de la règle qui dessine le halo :
    la case focalisee était identique a la case au repos, et rien ne
    disait ou l'on se trouvait au clavier. L'ombre neutralisee ici
    est celle du repos.                                              */
.case_reglage input[type="checkbox"]:not(:focus-visible) {
  box-shadow: none; }

/*  La feuille d'une seance. Le gabarit ne connait pas de tableau :
    il n'en affichait aucun. Ces règles ne redéfinissent donc rien,
    elles habillent des classes qui n'existaient pas.                */
.table_seance {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0; }

.table_seance th, .table_seance td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.table_seance th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em; }

.table_seance .colonne_presence {
  width: 70px;
  text-align: center; }

/*  Même raison que pour les cases de Configuration : l'ombre est
    retiree au repos, jamais au focus, sans quoi les cases de
    presence d'une feuille de seance se cochent a l'aveugle au
    clavier.                                                         */
.table_seance .colonne_presence input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0; }

.table_seance .colonne_presence input[type="checkbox"]:not(:focus-visible) {
  box-shadow: none; }

.table_seance label {
  cursor: pointer; }

.table_seance .ligne_note td {
  border-bottom: none;
  padding-top: 0;
  opacity: 0.75; }

.licence_alerte {
  color: var(--club-principale-fonce);
  font-weight: 700; }

.avis_annulation {
  color: var(--club-principale-fonce);
  font-weight: 700; }

.separateur_seance {
  margin-left: 10px; }

/* La rangée d'actions passe à la ligne. Elle ne le faisait pas, et
   le reçu, qui en porte trois depuis que son bouton « Retour » mène
   quelque part, débordait de trente-deux pixels sur un téléphone
   étroit. */
.actions_seance {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 15px; }

/*  La fiche d'un membre et les etiquettes. La encore, des classes
    que le gabarit ne connait pas.                                   */
.colonnes_fiche {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; }

.colonnes_fiche .bloc_fiche {
  flex: 1 1 280px; }

.bloc_fiche {
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: var(--club-arrondi);
  padding: 16px 18px;
  margin-bottom: 18px; }

.bloc_fiche h4 {
  margin: 0 0 10px; }

.bloc_fiche p {
  margin: 0 0 6px; }

.bloc_fiche b {
  display: inline-block;
  min-width: 150px; }

.bloc_fiche ul {
  margin: 0 0 6px 18px; }

.notes_internes {
  background-color: rgba(255, 255, 255, 0.8); }

.telephone_urgence {
  font-size: 1.3em;
  font-weight: 700; }

.photo_membre img {
  max-width: 160px;
  max-height: 200px;
  border-radius: var(--club-arrondi);
  display: block; }

/*  Le code QR de la fiche : il se lit d'un telephone et se copie
    d'un clic droit.

    Il est rendu en pleine resolution et reduit a l'affichage : ce
    qui se colle dans un document est donc l'image nette, pas la
    vignette. Pas d'angles arrondis — le rayon du club est reglable
    jusqu'a des valeurs qui mordraient sur les cibles de reperage
    des coins — et pas de rendu « pixelise », qui a la reduction
    ferait tomber des modules entiers.                             */
.qr_fiche {
  display: block;
  max-width: 150px;
  height: auto;
  margin: 0 0 14px;
  background-color: #fff; }

/*  LE VISAGE ET LE CODE, COTE A COTE.

    Ils vivaient dans deux colonnes differentes de la fiche. Ils
    disent la meme chose — c'est cette personne-ci, et voici sa
    fiche — et ils se regardent ensemble.

    Une hauteur commune de cent cinquante pixels les aligne : un
    portrait est plus haut que large, un code QR est carre, et
    c'est la hauteur, non la largeur, qui les met au meme niveau.
    Sur un telephone, ils passent l'un sous l'autre.               */
.identite_visuels {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px; }
  .identite_visuels .photo_membre {
    margin: 0; }
  .identite_visuels .photo_membre img, .identite_visuels .qr_fiche {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
    margin: 0; }

.etiquette {
  display: inline-block;
  padding: 2px 9px;
  margin: 0 3px;
  border-radius: 999px;
  background-color: var(--club-principale);
  color: #fff;
  font-size: 12px; }

.choix_etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px; }

.form_ligne {
  display: inline; }

.form_ligne button {
  width: auto; }

	/*  Le tableau de bord : des chiffres en vitrine et des jauges de
	    remplissage. Classes nouvelles, rien de redefini.

	    Six vignettes espacees de quatorze pixels faisaient six objets
	    séparés, chacun avec son cadre et son ombre : l'œil les comptait
	    au lieu de les comparer. Elles forment une seule bande, separees
	    par un trait d'un pixel.

	    La bande est en boîte flexible et non en grille : une grille a
	    colonnes automatiques laissait des cases vides au bout de la
	    dernière rangee, et l'ecart d'un pixel qui dessine les
	    séparateurs les peignait en gris plein. Six chiffres sur quatre
	    colonnes montraient deux rectangles gris sans rien dedans.       */
.chiffres_bord {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 18px;
  background-color: var(--club-fond);
  border: 1px solid var(--club-ligne);
  border-radius: var(--club-arrondi);
  overflow: hidden; }

/*  Le chiffre centré tenait le milieu d'une vignette vide : aligne a
    gauche, il se compare a celui du dessous quand la bande se replie
    en deux rangees. Les traits du dernier de chaque rangee et de la
    dernière rangee tombent sur la bordure de la bande : ils ne se
    voient pas deux fois.                                            */
.chiffre {
  flex: 1 1 148px;
  background-color: var(--club-fond);
  padding: 11px 14px 13px;
  text-align: left;
  box-shadow: inset -1px 0 0 var(--club-ligne), inset 0 -1px 0 var(--club-ligne); }

/*  L'intitule sur deux lignes decalait sa valeur d'une ligne vers le
    bas : sur une bande de six chiffres, un seul intitule long
    suffisait a ce que plus rien ne s'aligne. La place de deux lignes
    est réservée pour tous.                                          */
.chiffre span {
  display: block;
  /* La hauteur réservée suit la taille : deux lignes de douze
     pixels, et non deux de dix et demi. */
  min-height: 2.7em;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--club-texte-doux); }

.chiffre b {
  display: block;
  font-family: var(--club-chiffres);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--club-texte);
  font-variant-numeric: tabular-nums; }

	/*  Un chiffre qui appelle une action se distingue par sa couleur ;
	    les cinq autres restent a l'encre, sans quoi six accents ne
	    designaient plus rien.

	    La teinte est celle de l'alerte, non celle du club : un impayé
	    n'est pas une couleur de marque, et un club dont la couleur
	    principale est le vert aurait vu ses retards s'annoncer en vert.
	    Le liseré du haut double la couleur par une forme, pour qui ne
	    la distingue pas.                                                */
.chiffre_alerte {
  background-color: var(--club-alerte-fond, #fbeaea);
  box-shadow: inset -1px 0 0 var(--club-ligne), inset 0 -1px 0 var(--club-ligne), inset 0 3px 0 var(--club-alerte, #a32b2b); }

.chiffre_alerte b, .chiffre_alerte span {
  color: var(--club-alerte, #a32b2b); }

.jauge {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.12);
  overflow: hidden; }

/*  La règle générale « span span » pose dix pixels de marge haute :
    le remplissage, haut de huit pixels, passait entierement sous le
    clip de sa piste. Toutes les jauges paraissaient vides, même a
    cent pour cent.                                                  */
.jauge_pleine {
  display: block;
  height: 100%;
  margin: 0;
  background-color: var(--club-principale); }

/*  Un créneau plein depuis un an est à dédoubler, un créneau à trois
    places sur dix est à remplir : les deux demandent une décision, et
    ne se voyaient qu'en lisant les nombres un par un. La couleur ne
    remplace pas le pourcentage, elle le trie.                        */
.jauge_pleine_complet {
  background-color: var(--club-succes, #1b7a4b); }

.jauge_pleine_creuse {
  background-color: var(--club-attention, #8a5a08); }

	/*  La jauge d'un graphique en barres occupe sa colonne : c'est elle
	    qui porte la comparaison, et non un nombre posé à côté. Même
	    piste, même remplissage, même arrondi que la jauge courte ; seule
	    la place change.

	    Le remplissage garde une largeur minimale : un mois à une vente
	    sur mille dessinait une barre de zéro pixel, impossible à
	    distinguer d'un mois sans rien.                                  */
.jauge_large {
  width: 100%;
  height: 16px;
  margin-right: 0; }

.jauge_large .jauge_pleine {
  min-width: 2px; }

/*  Le chiffre d'affaires n'est pas un effectif : les deux graphiques
    de l'écran des assurances se lisent l'un sous l'autre, et deux
    barres de la même couleur invitaient à les comparer entre eux. */
.jauge_pleine_vente {
  background-color: var(--club-secondaire, #0a7d62); }

/*  Le mois en cours est le repère de lecture : il l'était par un
    « font-weight » écrit dans l'écran, rangée par rangée.            */
.table_seance .ligne_en_cours th, .table_seance .ligne_en_cours td {
  font-weight: 700; }

.table_seance .colonne_mois {
  white-space: nowrap;
  width: 105px;
  text-transform: none;
  font-size: inherit; }

/*  Les cartes d'album, et les boutons qui apparaissent au survol
    d'une photo dans l'écran d'administration. La galerie du gabarit
    n'affichait que des vignettes, sans titre ni action : ces classes
    sont nouvelles.                                                  */
.carte_album {
  position: relative; }

	/*  Le sélecteur reprend celui de la feuille du produit,
	    « .flex_gallerie > div a », en y ajoutant la classe de la carte :
	    c'est ce qui lui donne le poids nécessaire pour l'emporter, sans
	    recourir a !important.

	    Cette règle-là rend le lien invisible : c'était la zone de clic
	    transparente posée sur une vignette du temps de l'ancienne
	    visionneuse. Une carte d'album porte au contraire son titre et
	    son nombre de photos, qui doivent se lire.                       */
.flex_gallerie > div.carte_album a {
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 10px 12px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0, rgba(0, 0, 0, 0.78) 72px, rgba(0, 0, 0, 0) 130px);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.55); }

.flex_gallerie > div.carte_album span {
  font-weight: 700;
  line-height: 1.25;
  color: #fff; }

.flex_gallerie > div.carte_album small {
  opacity: 1;
  color: #fff; }

/*  Les actions d'une photo n'apparaissaient qu'au survol. Un écran
    tactile ne survole pas : sur une tablette ou un téléphone, elles
    étaient hors d'atteinte. Elles restent visibles, un peu effacees,
    et se marquent au survol quand il y en a un.                     */
.flex_gallerie .actions_photo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  padding-bottom: 6px;
  opacity: 0.8;
  transition: opacity 0.15s; }

.flex_gallerie > div:hover .actions_photo {
  opacity: 1; }

/*  Le degrade ci-dessus est celui qui venait de l'en-tete. Il est
    corrige plus haut dans cette feuille, sous
    « body .flex_gallerie > div.carte_album a » : ce sélecteur porte
    un élément de plus et l'emporte donc quel que soit l'ordre des
    deux. C'est lui qui pose le voile mesuré en pixels depuis le
    bas, sans quoi le titre d'un album sur photo claire retombe a
    1,50 pour un. Les deux gagneraient a fusionner le jour ou
    quelqu'un rangera cette feuille.                                 */
/*  Les champs facultatifs de l'inscription, repliés, et le corps
    d'une page écrite par le club. Le gabarit ne connait ni l'un ni
    l'autre.                                                         */
.details_inscription {
  width: 100%;
  margin: 6px 0 14px; }

.details_inscription summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 13.5px; }

.champs_facultatifs {
  display: flex;
  flex-wrap: wrap; }

.champs_facultatifs fieldset {
  width: 50%; }

.champs_facultatifs .fieldset_full {
  width: 100%; }

/* ------------------------------------------------------------------ */
/*  Le contenu d'une page du club                                      */
/* ------------------------------------------------------------------ */
/*  L'éditeur pose maintenant des titres, des listes, des tableaux, des
    images et des couleurs. Ce que le club voit dans l'éditeur doit être
    ce qu'il obtient sur le site : les mêmes balises y prennent la même
    allure, et le tableau qu'il vient de dessiner ne doit pas ressortir
    sans un trait — l'éditeur pose des bordures par une classe que
    texte_riche() ne laisse pas passer, et la page publiée n'a que ces
    règles-ci pour l'habiller.                                         */
.contenu_page {
  line-height: 1.65; }

.contenu_page p {
  margin: 0 0 12px; }

.contenu_page ul, .contenu_page ol {
  margin: 0 0 12px 22px; }

.contenu_page h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 24px 0 10px; }

.contenu_page h3, .contenu_page h4 {
  margin: 18px 0 8px; }

.contenu_page h5, .contenu_page h6 {
  margin: 14px 0 6px;
  font-weight: 600; }

.contenu_page blockquote {
  margin: 0 0 12px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--club-principale, #39449f);
  color: var(--club-texte-doux, #787a86); }

.contenu_page pre {
  margin: 0 0 12px;
  padding: 10px 12px;
  overflow-x: auto;
  background-color: var(--club-neutre-fond, #f0f1f4);
  border-radius: var(--club-arrondi, 4px); }

.contenu_page hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--club-ligne, #e2e2e2); }

/*  Une image trop grande débordait de la colonne et poussait la page
    à défiler de côté sur un téléphone.                               */
.contenu_page img {
  max-width: 100%;
  height: auto; }

/*  Un tableau de cinq colonnes ne rentre pas dans trois cent vingt
    pixels. Il défile dans son cadre plutôt que d'emporter la page,
    comme les tableaux de l'espace du compte.                         */
.contenu_page table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 14px;
  border-collapse: collapse; }

.contenu_page th, .contenu_page td {
  padding: 7px 10px;
  border: 1px solid var(--club-ligne, #e2e2e2);
  text-align: left;
  vertical-align: top; }

.contenu_page th {
  background-color: var(--club-neutre-fond, #f0f1f4);
  font-weight: 600; }

.contenu_page caption {
  padding-bottom: 6px;
  font-weight: 600;
  text-align: left; }

@media (max-width: 700px) {
  .chiffres_bord .chiffre {
    flex-basis: 130px; } }
/*  A l'impression, seule la feuille compte : le fond photographique,
    la navigation et les boutons ne servent qu'à l'écran, et une
    salle de cours n'a pas d'encre a gaspiller.                      */
@media print {
  #background, header, footer, nav, .sans_impression, .actions_seance {
    display: none !important; }

  body, section {
    background: #fff !important;
    color: #000 !important; }

  .table_seance th, .table_seance td {
    border-bottom: 1px solid #999; } }
	/*  Le logo du club.

	    Il était le h1 de chacun des quarante-deux écrans : le même
	    partout, et sans texte. Les quatorze règles qui habillaient
	    « header h1 » avaient été reportées dans le bloc <style> de
	    l'en-tête le jour où il est devenu un « div.logo_club ».

	    Elles restent EN FIN DE FEUILLE et ne remontent pas à la section
	    HEADER : celle-ci en porte des versions concurrentes, arrivées
	    depuis, qui donnent au logo de la colonne une plaque et une
	    bordure basse là où celles-ci lui donnent une marge et un fond
	    arrondi. Les deux jeux ont la même spécificité ; c'est l'ordre
	    qui tranche, et le bloc <style> de l'en-tête, chargé après toute
	    la feuille, tranchait en faveur de celui-ci. Le déplacer plus
	    haut changerait donc l'allure du logo sur les quarante-deux
	    écrans. Les deux jeux doivent fusionner un jour, en une fois et
	    en le vérifiant : ce n'est pas un simple report.                 */
header .logo_club {
  width: 130px;
  height: auto;
  max-width: 90%;
  display: inline-block;
  margin: 18px 15px 0 15px;
  position: relative;
  text-align: center; }

header .logo_club a {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%; }

header .logo_club a img {
  width: auto;
  max-width: 100%;
  margin: 0 auto; }

header.left_header .logo_club {
  float: none;
  margin-right: auto;
  margin-left: auto;
  display: block; }

#page_accueil header .logo_club, #page__en_construction header .logo_club {
  display: block;
  margin: 25px auto;
  text-align: center;
  width: 165px; }

body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club {
  width: calc(100% - 32px);
  max-width: none;
  margin: 0 16px 10px;
  padding: 8px 10px;
  background-color: var(--club-fond, #fff);
  border-radius: var(--club-arrondi, 4px); }

body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club a {
  color: var(--club-texte, #161a2e); }

body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block; }

@media (max-width: 850px) {
  #page_accueil header .logo_club, #page__en_construction header .logo_club {
    float: none;
    width: 160px; } }
@media (max-width: 800px) {
  header.left_header .logo_club {
    margin: 0 auto; }

  body:not(#page_accueil):not(#page__en_construction) header.left_header .logo_club {
    width: 132px;
    margin: 0 auto 8px;
    padding: 6px 8px; } }
/*  Le nom de l'écran est devenu le titre de la page. Dans la barre
    d'écran il suit le fil d'Ariane sur la même ligne : un titre est
    un bloc, il serait parti a la ligne.                             */
.barre_ecran h1.fil_courant {
  display: inline;
  font-size: inherit; }

/*  Les pages qui ouvraient sur un h2 portent maintenant un h1 : la
    feuille de style ne connait pas de h1 hors de l'en-tete, cette
    classe lui rend l'allure du h2 qu'il remplace.                   */
.titre_page {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase; }

.titre_page.center {
  text-align: center; }

/*  Le bandeau du consentement. Il était écrit en style en ligne dans
    le corps de l'en-tete ; le bouton qui l'ecarte avait besoin d'une
    règle.                                                           */
.bandeau_consentement {
  z-index: 999999999;
  position: relative;
  width: 100%;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background-color: #c90000;
  color: #fff; }

/* ------------------------------------------------------------------ */
/*  Les inscrits d'une séance, en cartes                               */
/* ------------------------------------------------------------------ */
	/*  Ce que l'encadrant fait pendant un cours, il le fait debout, un
	    téléphone à la main, en regardant des visages. La liste ne lui
	    donnait que des noms sur une ligne : il devait connaître ses vingt
	    membres par leur état civil pour cocher la bonne case, et ouvrir
	    une fiche pour trouver un numéro.

	    Les cartes se rangent côte à côte, autant que la largeur en
	    permet. Cent quarante pixels : un visage reconnaissable, quatre
	    cartes de front sur un téléphone tenu en paysage, huit sur un
	    portable.                                                          */
.grille_inscrits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 10px;
  padding: 12px; }

.carte_inscrit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 8px;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  text-align: center; }

/*  Une réservation annulée ou en attente reste lisible : c'est le
    liseré qui la distingue, pas une opacité qui coucherait son texte
    sous le seuil de contraste.                                        */
.carte_eteinte {
  border-left: 3px solid var(--club-attention, #8a5a08); }

/*  Un présent se voit d'un coup d'oeil : c'est la seule chose qu'on
    cherche en parcourant la grille pendant un cours.                  */
.carte_presente {
  border-color: var(--club-succes, #1b7a4b);
  box-shadow: inset 0 0 0 1px var(--club-succes, #1b7a4b); }

.carte_portrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--club-neutre-fond, #f0f1f4);
  border: 1px solid var(--club-ligne, #e2e2e2);
  flex: 0 0 auto; }

.carte_portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

/*  Sans photo, les initiales dans le même rond : la grille garde son
    alignement, et une carte sans visage ne fait pas un trou.          */
.carte_initiales {
  font-family: var(--club-chiffres);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--club-texte-doux, #787a86); }

.carte_nom {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3; }

.carte_nom a {
  text-decoration: none; }

.carte_nom a:hover, .carte_nom a:focus {
  text-decoration: underline; }

.carte_tel {
  margin: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums; }

.carte_tel a {
  text-decoration: none; }

.carte_sans {
  color: var(--club-texte-doux, #787a86);
  font-style: italic; }

.carte_etats {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  font-size: 11px; }

.carte_etats .puce {
  font-size: 10px;
  padding: 1px 6px; }

.carte_mention {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--club-texte-doux, #787a86); }

.carte_gestes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%; }

/*  La case de présence est la cible qu'on vise le plus souvent, au
    doigt, debout : elle prend toute la largeur de la carte et la
    hauteur d'une vraie commande tactile.                              */
.carte_case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: var(--club-arrondi, 4px);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none; }

.carte_case input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0; }

.carte_case input[type="checkbox"]:not(:focus-visible) {
  box-shadow: none; }

/*  Retirer une réservation est un geste rare et regrettable : il a
    l'allure qui convient, discrète, et sa cible reste atteignable.    */
.btn_icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  color: var(--club-texte-doux, #787a86);
  cursor: pointer; }

.btn_icone:hover, .btn_icone:focus {
  color: var(--club-alerte, #a32b2b);
  border-color: var(--club-alerte, #a32b2b); }

/*  Le formulaire de l'annulation ne porte rien de visible : il est
    rangé après la grille, hors du formulaire de pointage, et ne
    contient que ses champs cachés. Sans cette règle il occuperait
    une ligne vide sous chaque séance.                              */
.form_annulation {
  display: none; }

/*  Le formulaire qui enveloppe la grille n'est pas une mise en page.
 *
 *  La règle générale des formulaires du produit les compose en boîte
 *  flexible et les borne à mille vingt-quatre pixels : la grille,
 *  devenue élément de cette boîte, se réduisait à la largeur de son
 *  contenu — cent soixante-quatorze pixels sur un écran de mille deux
 *  cent quatre-vingts, soit une carte par rangée au lieu de six. Le
 *  formulaire ne sert ici qu'à porter le jeton et l'adresse du
 *  traitement ; il redevient un bloc.                                */
.feuille_pointage {
  display: block;
  margin: 0;
  width: 100%;
  max-width: none; }

/*  L'état du dernier enregistrement, sous la grille de la séance.     */
.feuille_pointage .etat_pointage {
  margin: 0 12px 12px; }

/*  La sortie du menu est un bouton, et se lit comme une entrée.
 *
 *  Elle est passée en formulaire POST pour porter son jeton. Rien ne
 *  doit s'en voir : c'est la dernière entrée de la colonne, et un
 *  bouton plein y ferait une marche. Elle reprend donc exactement le
 *  retrait, la taille et la couleur des liens du menu.               */
.sous_menu li form {
  margin: 0; }

.lien_menu {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 16px;
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  color: var(--club-rail-texte, #cecece);
  cursor: pointer;
  min-height: 32px; }

.lien_menu:hover, .lien_menu:focus {
  color: var(--club-rail-fort, #fff); }

/*  Un bouton qui a l'allure d'un lien.
 *
 *  La déconnexion du pied est passée en formulaire POST, pour porter
 *  son jeton. Elle doit continuer de se lire comme le lien qu'elle
 *  était : c'est la dernière entrée d'une ligne de liens, et un
 *  bouton plein y ferait une marche.                                 */
.lien_bouton {
  background: none;
  border: 0;
  padding: 7px 6px;
  margin: 0;
  width: auto;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  min-height: 32px; }

.lien_bouton:hover, .lien_bouton:focus {
  text-decoration: none; }

	/*  La déconnexion du pied et celle de la colonne sont devenues des
	    boutons, pour porter leur jeton : elles entrent donc dans la règle
	    des cibles tactiles du produit, que « section button » ne couvre
	    pas — ni le pied ni la colonne ne sont dans une section.

	    La règle est ici, après les deux définitions de base : posée
	    avant, elle avait la même spécificité et se faisait écraser par
	    elles.                                                            */
@media (max-width: 900px) {
  .lien_bouton {
    min-height: 44px;
    display: inline-flex;
    align-items: center; }

  .lien_menu {
    min-height: 44px; } }
/*  Le sommaire des textes légaux, et la section qu'on vient chercher.
 *
 *  Quatre liens du pied mènent à la même page, trois par une ancre.
 *  L'arrivée ne se voyait pas : la page défilait, et rien ne disait
 *  laquelle des quatre sections on venait lire. Le liseré la
 *  désigne, et la marge de défilement l'empêche de coller au haut
 *  de la fenêtre, sous la barre de l'écran.                          */
.sommaire_legal {
  margin: 0 0 10px;
  padding: 0; }

.sommaire_legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none; }

.sommaire_legal li {
  margin: 0; }

.sommaire_legal a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  min-height: 32px; }

:target {
  scroll-margin-top: 24px; }

section:target > h2, section:target > h3 {
  border-left: 4px solid var(--club-principale, #39449f);
  padding-left: 12px; }

/*  La pastille du panier, dans l'entrée « Boutique » du menu.
    Elle prend la couleur d'accent de la colonne et non celle du
    club : sur une colonne sombre, la couleur de marque d'un club
    tombe parfois à trois pour un contre le fond, et un nombre de
    onze pixels n'y survit pas.                                       */
.pastille_panier {
  display: inline-block;
  min-width: 18px;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--club-rail-accent, #8d93c1);
  color: var(--club-rail, #1f1f1f);
  font-family: var(--club-chiffres);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle; }

/*  Le bandeau porte maintenant la question ET ses deux réponses : il
    se replie donc, au lieu de pousser les boutons hors de l'écran sur
    un téléphone.                                                     */
.bandeau_consentement {
  flex-wrap: wrap; }

.consentement_question {
  flex: 1 1 260px;
  padding: 7px 10px;
  font-weight: 700; }

.consentement_reponses {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; }

.bandeau_consentement a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700; }

/*  Les deux réponses se distinguent l'une de l'autre, et toutes deux
    du fond rouge du bandeau : l'accord est plein, le refus est bordé.
    Aucune des deux n'est plus facile à atteindre que l'autre, c'est
    la condition d'un consentement libre.                             */
.consentement_reponses .btn {
  flex: 0 0 auto;
  min-height: 32px;
  margin: 0;
  width: auto;
  background-color: #fff;
  color: #c90000;
  border: 1px solid #fff; }

.consentement_reponses .btn.btn_white {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.85); }

.consentement_reponses .btn:hover, .consentement_reponses .btn:focus {
  background-color: rgba(255, 255, 255, 0.88);
  color: #c90000; }

.bandeau_consentement button#fermer_consentement {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 10px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--club-arrondi, 4px);
  cursor: pointer;
  font-size: 14px; }

/*  Les liens du pied de colonne faisaient seize pixels de haut,
    colles les uns aux autres : impossibles a viser au doigt. Le
    remplissage leur donne trente pixels sans toucher a la taille du
    texte, ce qui est le minimum que la vérification du produit
    exige. Chaque pixel de plus coûte quatre pixels de pied, donc
    quatre pixels de menu : le pied est posé par-dessus la liste des
    entrées, qui lui réserve sa hauteur.                             */
footer a.small {
  padding: 7px 6px; }

/*  Le pied de la colonne du site : heures d'ouverture, plan,
    reseaux. Il n'existait pas, faute de réglages pour le remplir ;
    il ne s'affiche que si le club a renseigne quelque chose.        */
.pied_colonne {
  margin: 18px 16px 0;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid rgba(127, 127, 127, 0.35); }

.pied_colonne p {
  margin: 0 0 8px; }

.pied_colonne ul.pied_reseaux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px; }

.pied_colonne a {
  display: inline-block;
  padding: 5px 0;
  text-decoration: underline; }

	/*  L'etiquette d'un champ que son voisinage suffit a nommer pour qui
	    voit l'écran, et qu'un lecteur d'écran doit tout de même
	    entendre. Un tableau de soixante champs dont aucun n'a
	    d'etiquette ne s'annonce que par « zone de saisie ».

	    « sr-only » est le nom que porte la même intention dans l'écran
	    « Mode d'emploi », qui l'a emprunte a un autre vocabulaire : sans
	    cette seconde écriture, la légende du tableau « Ou se règle
	    chaque chose » s'affichait en clair au milieu de l'écran, au-
	    dessus de la ligne d'intitules qu'elle double.                   */
.etiquette_masquee, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; }

.liste_pages_menu {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 12px; }

/* ======================================================================== */
/*        LES QUATRE ÉCRANS QUI SONT ARRIVÉS APRÈS CETTE FEUILLE            */
/* ======================================================================== */
/*  « Menus », « Tarifs », « Modèles de courriels » et « Mode d'emploi » ont
    été livrés alors que cette feuille était fermée à leurs auteurs. Ils se
    sont appuyés sur les classes existantes et ont laissé des points
    d'accroche : table_tarifs, liste_variables_courriel, groupe_reglages,
    section_admin, sr-only. Aucun n'avait de règle. Ce qui se voyait :

    - les champs des tableaux de réglage sont blancs et sans bordure ; une
      ligne sur deux de ces tableaux étant blanche elle aussi, un champ sur
      deux était invisible et la gérance ne voyait pas qu'elle pouvait
      écrire dedans ;
    - à 390 px, « 130.00 » s'affichait « 130.C » et « 20 séances » « 20
      séance » : les champs se laissaient écraser au lieu de faire défiler
      leur cadre, et le symbole de la devise tombait à la ligne suivante ;
    - les vingt-quatre modèles de courriels formaient une colonne de
      vingt-quatre lignes hautes, dont rien ne disait que c'étaient des
      liens ;
    - la légende « Où se règle chaque chose », écrite pour les seuls
      lecteurs d'écran, s'affichait en clair au milieu du Mode d'emploi ;
    - les sept sections repliables du Mode d'emploi montraient le triangle
      du navigateur seul dans la marge, à côté d'un titre centré : rien ne
      reliait l'un à l'autre, et rien ne disait qu'on pouvait cliquer.   */
	/*  LES TABLEAUX DE RÉGLAGE : MENUS ET TARIFS.

	    Même forme, même remède : un libellé, un ou deux nombres, une case
	    « en vente » ou « affichée ». Les deux étaient écrits en double
	    dans le bloc <style> de l'en-tête ; ils sont ici une fois.        */
.table_menus input[type="text"], .table_menus input[type="number"],
.table_tarifs input[type="text"], .table_tarifs input[type="number"] {
  border: 1px solid rgba(127, 127, 127, 0.5);
  border-radius: var(--club-arrondi, 4px);
  padding: 5px 7px;
  background-color: #fff;
  color: var(--club-encre, #1F1F1F); }

/*  Largeur en pourcentage, et pas en pixels : la colonne décide, et
    sur un téléphone le tableau reste dans son cadre défilant au lieu
    de pousser la page de côté. La largeur MINIMALE, elle, est ferme :
    sans elle le cadre ne défile pas, il écrase, et la valeur saisie
    devient illisible sans que rien ne le signale.                    */
.table_menus input[type="text"], .table_tarifs input[type="text"] {
  width: 100%;
  min-width: 8em; }

.table_menus input[type="number"], .table_tarifs input[type="number"] {
  width: 5.5em;
  min-width: 5.5em; }

.table_menus td, .table_tarifs td {
  vertical-align: top; }

/*  Les nombres d'un tarif se lisent en colonne : ils prennent la
    police à chasse fixe du club, comme partout ailleurs où le produit
    aligne des chiffres.                                              */
.table_tarifs input[type="number"],
.table_tarifs input[inputmode="decimal"] {
  font-family: var(--club-chiffres);
  font-variant-numeric: tabular-nums; }

/*  Le symbole de la devise appartient au montant : il ne part pas à la
    ligne tout seul sous son champ.                                    */
.table_tarifs td {
  white-space: nowrap; }

.table_tarifs td small, .table_menus td small {
  white-space: normal; }

/*  Le code du tarif, sous son libellé : c'est ce que le tunnel d'achat
    reconnaît, il se lit lettre à lettre.                              */
.table_tarifs td small code {
  font-family: var(--club-chiffres);
  font-size: 0.95em; }

/*  La case « En vente » est seule dans sa colonne : centrée, elle se
    voit d'un coup d'œil sur toute la hauteur du tableau.             */
.table_tarifs td .case_reglage {
  justify-content: center;
  margin-top: 0; }

.table_tarifs th:last-child, .table_menus th:last-child {
  text-align: center; }

	/*  LES MODÈLES DE COURRIELS.

	    Le sommaire des vingt-quatre messages, et la liste des variables
	    qu'un message accepte. Sans règle, c'étaient deux colonnes de
	    lignes hautes, sans puce (le reset en retire), sans soulignement
	    (le reset retire aussi la décoration des liens) : rien ne disait
	    lesquelles menaient quelque part.                                 */
ul.liste_variables_courriel {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px; }

ul.liste_variables_courriel li {
  flex: 1 1 260px;
  margin: 0;
  padding: 4px 0;
  line-height: 1.45; }

/*  Un lien du sommaire se voit et se vise : souligné, et haut de
    trente pixels au moins, comme le reste du produit.                */
ul.liste_variables_courriel a {
  display: inline-block;
  padding: 4px 0;
  color: var(--club-principale, #39449f);
  text-decoration: underline;
  text-underline-offset: 2px; }

ul.liste_variables_courriel a:hover,
ul.liste_variables_courriel a:focus {
  color: var(--club-principale-fonce, #881f20); }

/*  Le nom d'une variable, « {prenom} », est un littéral : il se copie
    tel quel dans le message. La chasse fixe le distingue de la phrase
    qui l'explique, et l'aplat dit où il commence et où il finit.     */
ul.liste_variables_courriel code {
  font-family: var(--club-chiffres);
  font-size: 0.95em;
  padding: 1px 5px;
  border-radius: var(--club-arrondi, 4px);
  background-color: var(--club-surface-page, #f2f2f2);
  color: var(--club-encre, #1f1f1f);
  white-space: nowrap; }

	/*  LE MODE D'EMPLOI.

	    Sept sections repliables. Le navigateur dessine son propre
	    triangle au bord gauche du « summary », qui s'aligne mal avec un titre
	    centré : la flèche du produit, le « span.marque », prend sa place
	    et tourne quand la section s'ouvre.                               */
details.groupe_reglages {
  margin: 0 0 6px; }

details.groupe_reglages > summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 0; }

details.groupe_reglages > summary::-webkit-details-marker {
  display: none; }

details.groupe_reglages > summary h3 {
  margin-bottom: 12px; }

details.groupe_reglages > summary .marque {
  display: inline-block;
  margin-right: 8px;
  color: var(--club-principale, #39449f);
  -moz-transition: transform 0.15s ease-in-out;
  -o-transition: transform 0.15s ease-in-out;
  -webkit-transition: transform 0.15s ease-in-out;
  -ms-transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out; }

details.groupe_reglages[open] > summary .marque {
  transform: rotate(90deg); }

/*  Le titre replié se distingue de celui qui est ouvert : sans cela,
    sept bandes identiques ne disaient pas laquelle on venait de
    lire.                                                             */
details.groupe_reglages:not([open]) > summary h3 {
  color: var(--club-texte-doux, #787a86); }

details.groupe_reglages > summary:hover h3 {
  color: var(--club-principale, #39449f); }

/*  Le tableau « Où se règle chaque chose » est enveloppé d'un div qui
    porte le nom de la classe des tableaux : il en hérite l'habillage,
    ce qui est voulu, mais pas le défilement, qu'un div doit porter
    lui-même. Sans lui, deux colonnes de texte long poussent la page
    de côté sur un téléphone.                                          */
div.tableau_admin {
  overflow-x: auto; }

/*  La colonne « Où » porte un lien vers l'écran nommé. Sans règle, il
    gardait la taille de base, plus grande que la ligne qui le
    désigne : la moitié droite du tableau paraissait écrite en gros.  */
.tableau_admin td a {
  color: var(--club-principale, #39449f);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600; }

.tableau_admin td a:hover, .tableau_admin td a:focus {
  color: var(--club-principale-fonce, #881f20); }

/*  Les paragraphes du Mode d'emploi : une ligne de texte suivie sur
    toute la largeur d'un écran de bureau se relit mal, l'œil perdant
    le début de la ligne suivante. Soixante-quinze signes est la mesure
    d'usage.                                                          */
.section_admin p.full, .section_admin ul.full {
  max-width: 75ch; }

.section_admin ul.full {
  margin: 0 0 12px 22px;
  list-style: disc; }

.section_admin ul.full li {
  margin-bottom: 6px;
  line-height: 1.55; }

/* ======================================================================== */
/*             La barre d'outils de l'éditeur de texte riche                */
/* ======================================================================== */
/*  L'éditeur précédent dessinait ses onze boutons avec une police d'icônes
    qui n'avait jamais été versée au dépôt : le navigateur affichait onze
    carrés vides, et cinquante lignes de feuille remplaçaient chaque icône
    manquante par un mot.

    Summernote est livré avec la sienne, déposée dans assets/css/font, et
    ses boutons portent une infobulle française qui les nomme aussi pour un
    lecteur d'écran. Il ne reste donc à écrire que ce qui raccorde sa barre
    au reste du produit : la police du club, et une cible atteignable au
    doigt.                                                                 */
.note-editor {
  margin-bottom: 0;
  font-family: var(--club-police);
  /*  La feuille de l'éditeur pose ses propres bordures ; celle du
      produit borde tous ses champs. Sans cette remise à plat, la
      zone portait deux cadres l'un dans l'autre.                  */
  border-radius: var(--club-arrondi, 4px); }

.note-editor .note-toolbar {
  background-color: var(--club-neutre-fond, #f0f1f4); }

	/*  Un bouton de barre est une cible qu'on vise à la souris comme au
	    doigt. La règle générale du produit lui donne déjà sa hauteur sur
	    un écran étroit ; c'est sa largeur qui manquait — une icône de
	    seize pixels dans un bouton sans côtés faisait une cible de vingt
	    et un pixels de large, sous le seuil que le produit se donne.

	    La barre passe alors à deux rangées sur un téléphone. C'est le
	    bon compromis : deux rangées se lisent, une cible de vingt et un
	    pixels se manque.                                                */
.note-editor .note-btn {
  min-height: 30px;
  min-width: 30px;
  font-family: var(--club-police);
  color: var(--club-encre, #1f1f1f); }

@media screen and (max-width: 900px) {
  .note-editor .note-btn {
    min-width: 44px; } }
.note-editor .note-editable {
  font-family: var(--club-police);
  color: var(--club-encre, #1f1f1f);
  background-color: var(--club-fond, #fff); }

/*  Ce que le club écrit s'affiche dans l'éditeur comme sur la page :
    voir « Le contenu d'une page du club » plus bas, qui donne aux
    mêmes balises la même allure.                                    */
.note-editor .note-editable table {
  border-collapse: collapse;
  width: 100%; }

.note-editor .note-editable table td,
.note-editor .note-editable table th {
  border: 1px solid var(--club-ligne, #e2e2e2);
  padding: 6px 8px; }

.note-editor .note-editable img {
  max-width: 100%;
  height: auto; }

/* ======================================================================== */
/*                    Le mouvement, pour qui n'en veut pas                  */
/* ======================================================================== */
/*  Le produit anime tout : les panneaux qui se déplient, le voile de
    chargement, les changements de couleur au survol, le défilement vers le
    haut d'une fenêtre modale. Aucune de ces animations ne demandait son
    avis au système, alors que tous en offrent le réglage depuis des années
    et qu'un vestibulaire fragile en tire des nausées.

    La préférence ne supprime pas le mouvement, elle le ramène à une durée
    que l'œil ne suit pas : l'état d'arrivée est le même, les gestionnaires
    de fin d'animation de jQuery se déclenchent toujours, et rien de ce qui
    dépend d'eux ne se casse.                                              */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }
/* ======================================================================== */
/*                Les textes de substitution des champs gris                */
/* ======================================================================== */
/*  « Non renseignée. » dans les trois champs de clé secrète de la page de
    configuration : la couleur venait du navigateur, qui compose un texte de
    substitution en atténuant la couleur du champ. Sur le gris de
    « input_grey » cela donnait 4,12 pour un, sous le seuil. La couleur est
    posée, et c'est celle que le champ emploie déjà pour son texte : 5,21
    pour un sur ce même gris.                                              */
.input_grey::placeholder {
  color: var(--club-texte-doux, #616371);
  opacity: 1; }

.input_grey::-webkit-input-placeholder {
  color: var(--club-texte-doux, #616371);
  opacity: 1; }

/* ======================================================================== */
/*                  Ce qui se vise au doigt, et seulement la                */
/* ======================================================================== */
/*  Mesure sur les quarante-deux écrans, aux trois largeurs tactiles : les
    entrées du menu font 41 pixels de haut dans la colonne du compte et 34
    sur les pages publiques, le bouton qui déplie le menu 43, et le lien
    « Découvrir » 34. Le seuil confortable est 44.

    L'agrandissement est réservé aux largeurs où le menu se replie derrière
    son bouton, c'est-à-dire aux appareils tactiles. Au-delà, la colonne
    reste fixe et fait défiler ses vingt-quatre entrées : quatre pixels par
    entrée y coûteraient cent pixels de liste pour un gain nul, la souris
    ne ratant pas une cible de quarante et un pixels.                     */
@media (max-width: 800px) {
  /*  Les entrées du menu, celle de la colonne du site comme celle
      de la colonne du compte : vingt pixels de texte et sept de
      remplissage de chaque côté, trente-quatre en tout. Douze les
      portent à quarante-quatre. Le second sélecteur reprend celui
      de la règle qu'il complète, dont les deux « :not » à
      identifiant pèsent plus lourd que toute classe.              */
  .sous_menu li a {
    padding-top: 12px;
    padding-bottom: 12px; }

  body:not(#page_accueil):not(#page__en_construction) .sous_menu li a {
    padding-top: 12px;
    padding-bottom: 12px; }

  /*  Le bouton de réservation : vingt et un pixels de texte et dix
      de remplissage, quarante et un en tout. C'est la seule entrée
      du menu qui reste visible quand la colonne est repliée, donc
      celle qu'un doigt vise le plus souvent.                      */
  body:not(#page_accueil):not(#page__en_construction) .sous_menu #btn_reserver {
    padding-top: 12px;
    padding-bottom: 12px; }

  /*  Le bouton qui déplie le menu : 43 pixels, à un du compte.     */
  header .menu_mobile {
    min-height: 44px; }

  /*  Le lien vers la page du club : 34 pixels. Même raison qu'au-
      dessus pour la longueur du sélecteur ; la règle qu'il
      complète pose déjà « display: flex » et le centrage, le
      libellé reste au milieu de sa cible.                         */
  body:not(#page_accueil):not(#page__en_construction) header.left_header .btn_discover {
    min-height: 44px; } }
/* ======================================================================== */
/*      Un cadre à défilement, dans un formulaire, doit pouvoir se         */
/*      rétrécir                                                            */
/* ======================================================================== */
/*  « tableau_defilant » enveloppe les tableaux larges et les fait défiler
    en eux-mêmes plutôt que de pousser la page. Il tenait cette promesse
    partout SAUF dans un formulaire : « form » est une boîte flexible, et
    la largeur minimale d'un élément flexible vaut « auto », c'est-à-dire
    celle de son contenu. Le cadre refusait donc de se rétrécir, et c'est
    la page qui s'élargissait.

    Tant que les champs des tableaux de réglage n'avaient pas de largeur
    minimale, cela ne se voyait pas : ils s'écrasaient à la place, et
    « 130.00 » s'affichait « 130.C ». Leur donner une largeur lisible a
    fait apparaître le défaut de dessous. Mesure à 320 px : la page des
    tarifs débordait de 189 pixels, celle des menus de 65.

    « min-width: 0 » lui rend le droit de se rétrécir ; son propre
    « overflow-x: auto » reprend alors son office.

    « position: relative » répond à un second défaut, que le premier
    cachait. Les tableaux de réglage portent une étiquette invisible par
    champ, « etiquette_masquee », qui existe pour les lecteurs d'écran :
    elle est en position absolue et, faute d'ancêtre positionné, son bloc
    conteneur était le formulaire et non le cadre à défilement. Elle se
    posait donc à sa place naturelle DANS le tableau large, soit à 396
    pixels sur un écran de 320, et étirait d'autant la zone défilante du
    document : la page partait de côté alors que le tableau, lui,
    défilait bien dans son cadre. Le cadre devient leur bloc conteneur,
    et son propre débordement les rattrape.                              */
.tableau_defilant {
  min-width: 0;
  max-width: 100%;
  position: relative; }

/* ======================================================================== */
/*        Un titre de section, dans un formulaire, tient sa ligne           */
/* ======================================================================== */
/*  « form » est une boîte flexible qui replie ses enfants : c'est ce qui
    range les champs côte à côte. La feuille rendait sa ligne au « h3 »
    (« h3 { display: block; width: 100% } », section FORM) mais pas au
    « h4 », qui n'existait dans aucun formulaire jusqu'aux écrans livrés
    après elle.

    L'écran Tarifs en pose deux. Résultat : « INSCRIPTION » se rangeait à
    DROITE du paragraphe qui le précède, à mi-hauteur, comme s'il titrait
    la colonne d'à côté ; et la phrase d'introduction de « LOTS DE SÉANCES »
    partageait la ligne de son propre titre. Un titre qui n'est pas au-dessus
    de ce qu'il titre ne titre rien.                                        */
form h4 {
  width: 100%; }

/* ------------------------------------------------------------------
   L'adresse publique d'un événement

   La page d'un événement existait, le routeur l'aiguillait, et la
   création lui posait une adresse courte « à mettre sur une affiche ».
   Rien ne la montrait nulle part : le club avait une page publique par
   stage et aucun moyen d'en connaître l'adresse. Elle se lit et se
   copie ici, en haut du panneau de l'événement.
   ------------------------------------------------------------------ */
.adresse_publique {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px; }

.adresse_publique label {
  width: 100%;
  font-size: 13px;
  color: #ffffff; }

.adresse_publique input {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 13px; }

.adresse_publique .btn {
  flex: 0 0 auto;
  margin: 0; }

/* ------------------------------------------------------------------
   Ce qui est passé, et ce qui est annulé

   Les deux étaient posés en style en ligne : « opacity: 0.55 » sur un
   bloc de séance passée, « opacity: 0.4 » sur une réservation annulée.
   L'opacité s'applique à TOUT ce que le bloc contient, texte et bouton
   d'action compris : le texte tombait à 2,97 pour un dans le premier
   cas et à 2,45 dans le second, là où quatre et demi sont demandés à
   cette taille. Or c'est exactement ce qu'on vient lire sur l'écran de
   l'historique : qui avait réservé, quand, et ce qu'il avait demandé.

   L'intention se garde — ces blocs ne sont pas ceux sur lesquels on
   agit — mais elle se dit autrement : un fond légèrement retiré et un
   trait à gauche, qui distinguent sans effacer. Le texte garde son
   contraste, et le bouton le sien.
   ------------------------------------------------------------------ */
.list_form.seance_passee {
  background-color: var(--club-surface-page, #f7f7f8);
  border-left: 3px solid var(--club-ligne, #e2e2e2); }

.reservation_eteinte {
  position: relative;
  padding-left: 10px;
  border-left: 3px solid var(--club-ligne, #e2e2e2);
  /* Une atténuation qui reste au-dessus du seuil : le texte perd de
     l'insistance, pas sa lisibilité. */
  opacity: 0.82; }

/* ======================================================================
   DIRECTION B — CARTES CLAIRES
   ======================================================================

   Ce bloc remplace la colonne sombre par une barre haute, et pose le
   langage de cartes claires sur l'ensemble de l'espace applicatif.

   Il vient en dernier : il tranche les conflits de cascade par sa seule
   position, sans un seul « !important ». Les blocs précédents restent
   en place et continuent de servir les pages du site, qui gardent leur
   colonne — la direction B ne les concernait pas.

   Trois gestes :

   1. La navigation passe en haut, sur une ligne. Ce qui n'y tient pas
      se replie derrière « Plus » ; sans JavaScript la barre passe à la
      ligne et rien ne disparaît.
   2. Les panneaux deviennent des cartes : fond de page teinté de la
      couleur du club, cartes blanches, un trait d'un pixel, une ombre
      d'un pixel, des angles de dix.
   3. L'air remplace le trait. Les séparations se font par l'espace
      plutôt que par des filets, et les rangées respirent.
   ====================================================================== */
/* ---------------------------------------------------------------------- */
/*  1. La barre haute                                                      */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction) {
  /* Le contenu n'est plus décalé par une colonne : il se centre.
   *
   *  Le fil d'Ariane et le contenu vivent dans « main », qui est le
   *  frère de l'en-tête : « header ~ .container » ne les atteignait
   *  pas, et les deux gardaient la marge de deux cent quarante-huit
   *  pixels que la colonne leur imposait. Le contenu s'affichait donc
   *  décalé vers la droite, avec une gouttière vide à gauche là où le
   *  rail se tenait, tandis que le pied — lui, vrai frère de
   *  l'en-tête — se centrait déjà.                                    */
  /* Le fil d'Ariane suit la même colonne que le contenu. */
  /* La marge de 75 px payait la hauteur du logo dans le rail.
     Sous la barre, elle ouvre un trou au-dessus de la carte. */ }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute {
    /* Collante ou non : le club le règle. « --club-barre-position »
       vaut « sticky » ou « static ». */
    position: var(--club-barre-position, sticky);
    top: var(--club-barre-marge, 14px);
    left: auto;
    /* La barre se resserre dans la largeur du contenu et prend la
       forme que le club lui donne : bandeau pleine largeur à zéro
       d'arrondi, conteneur arrondi ou pastille au-delà. */
    width: auto;
    max-width: var(--club-barre-largeur, 1240px);
    min-height: 62px;
    height: auto;
    padding: 0 14px 0 24px;
    margin: var(--club-barre-marge, 14px) auto 0;
    border-radius: var(--club-barre-arrondi, 50px);
    box-shadow: var(--club-barre-ombre, 0 1px 2px rgba(22, 26, 46, 0.05));
    z-index: 40;
    display: flex;
    /* La colonne empilait ses éléments : sans cette ligne, l'enseigne,
       le menu et le bouton d'événement restent l'un sous l'autre et la
       « barre » fait cent soixante-huit pixels de haut. */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    background: var(--club-barre-fond, #fff);
    color: var(--club-barre-texte, #616371);
    /* Le trait suit la forme : seulement dessous pour un bandeau
       pleine largeur, tout autour pour un conteneur. Les bords
       latéraux d'un bandeau sortent de la vitre, et son trait du
       haut ferait une ligne collée au bord de l'écran. */
    border-style: solid;
    border-color: var(--club-barre-trait, #e5e6eb);
    border-width: var(--club-barre-bordure, 0 0 1px);
    overflow: visible;
    /* Le conteneur que la colonne empilait verticalement s'aligne.
       Il ne porte que l'enseigne : le menu, le bouton d'événement et
       le bouton mobile sont ses frères dans l'en-tête. */
    /* Un <br> hérité de la mise en page en colonne devenait un
       élément de la ligne, avec sa part de l'espacement. */
    /* Le bouton d'événement passe à droite du menu, en second rang. */
    /* L'enseigne reprend sa taille de nom : la plaque claire du rail
       n'a plus lieu d'être sur un fond déjà clair. */
    /* La règle de la colonne pose « flex: 0 0 auto » sur chacun de ses
       enfants : rien ne rétrécissait, et le menu poussait la page
       au-delà de la fenêtre au lieu de se replier. L'enseigne et le
       bouton gardent leur taille ; le menu, lui, prend ce qui reste
       et cède ce qu'il faut. C'est cette largeur cédée que le script
       mesure pour décider ce qui passe derrière « Plus ». */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > div:first-child {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 0;
      margin: 0; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > br {
      display: none; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > a.btn {
      order: 3;
      flex-shrink: 0;
      margin: 0;
      padding: 8px 13px;
      font-size: 13px;
      width: auto; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .logo_club {
      width: auto;
      max-width: 200px;
      margin: 0;
      padding: 0;
      background: transparent;
      border-radius: 0;
      flex-shrink: 0; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .logo_club a {
        color: var(--club-texte, #161a2e);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.01em; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .logo_club img {
        max-height: 38px;
        width: auto;
        display: block; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn_discover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .pied_colonne {
      display: none; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .action_reserver {
      position: relative;
      flex-shrink: 0;
      z-index: 30; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > nav.menu_barre {
      flex: 1 1 auto;
      min-width: 0; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ main .container {
    width: auto;
    max-width: var(--club-largeur, 1240px);
    margin: 22px auto 36px;
    padding: 0 26px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ main .barre_ecran {
    width: auto;
    max-width: var(--club-largeur, 1240px);
    margin: 0 auto;
    padding: 14px 26px 0; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ main .container > section.m-top75 {
    margin-top: 0 !important; }

/* LE FIL D'ARIANE DÉFILE AVEC LA PAGE.
 *
 *  Il était collant, hérité du temps où il était le seul repère fixe
 *  d'un écran sans barre haute. Deux bandeaux collants l'un sous
 *  l'autre mangent quatre-vingt-seize pixels de hauteur utile en
 *  permanence, et sur un téléphone posé à l'horizontale il ne restait
 *  presque rien du contenu. La barre haute reste, elle ; le fil part
 *  avec la page. */
header.left_header.barre_haute ~ main .barre_ecran {
  position: static;
  top: auto; }

/* ---------------------------------------------------------------------- */
/*  2. Le menu, en ligne                                                   */
/* ---------------------------------------------------------------------- */
.menu_barre {
  flex-grow: 1;
  min-width: 0; }
  .menu_barre .sous_menu {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Par défaut la barre passe à la ligne : sans JavaScript, aucune
       entrée ne se perd. Le script pose « mesure » avant de mesurer,
       et c'est seulement alors que la ligne devient unique. */
    flex-wrap: wrap;
    list-style: none;
    max-height: none;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    /* Les titres de section n'ont pas de sens sur une ligne. Ils
       restent dans le document pour les lectures d'écran. */
    /* La sortie n'est plus épinglée en bas d'une colonne. */ }
    .menu_barre .sous_menu li {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      width: auto; }
    .menu_barre .sous_menu li.menu_groupe {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
      background: transparent;
      /*  Sans ça, la règle « premier enfant collant » de la colonne
          peignait un carré noir dans la barre. */ }
    .menu_barre .sous_menu a, .menu_barre .sous_menu .lien_menu, .menu_barre .sous_menu button.lien_menu {
      display: block;
      padding: 8px 13px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--club-texte-doux, #616371);
      font-size: 13.5px;
      font-weight: 400;
      line-height: 1.35;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0; }
      .menu_barre .sous_menu a:after, .menu_barre .sous_menu .lien_menu:after, .menu_barre .sous_menu button.lien_menu:after {
        content: none; }
      .menu_barre .sous_menu a:hover, .menu_barre .sous_menu a:focus-visible, .menu_barre .sous_menu .lien_menu:hover, .menu_barre .sous_menu .lien_menu:focus-visible, .menu_barre .sous_menu button.lien_menu:hover, .menu_barre .sous_menu button.lien_menu:focus-visible {
        background: var(--club-surface-page, #f7f8fb);
        color: var(--club-texte, #161a2e); }
    .menu_barre .sous_menu a.active,
    .menu_barre .sous_menu button.lien_menu.active {
      background: var(--club-principale-claire, #eef0f9);
      color: var(--club-principale-fonce, #232c6b);
      font-weight: 500; }
    .menu_barre .sous_menu li.menu_sortie {
      margin-left: 4px; }
  .menu_barre.mesure .sous_menu {
    flex-wrap: nowrap;
    overflow: hidden; }

/* Le repli. */
.menu_plus {
  position: relative; }
  .menu_plus > button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--club-ligne, #e5e6eb);
    border-radius: 8px;
    background: var(--club-fond, #fff);
    color: var(--club-texte-doux, #616371);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap; }
    .menu_plus > button:hover, .menu_plus > button:focus-visible {
      color: var(--club-texte, #161a2e); }
    .menu_plus > button svg {
      transition: transform .15s ease; }
    .menu_plus > button[aria-expanded="true"] svg {
      transform: rotate(180deg); }

/* Gérance / Encadrement / Le club : un bouton, le reste sous le volet.
   Même panneau que « Plus », sans le liseré : ça reste une entrée de
   menu, pas un second bouton Plus. */
.menu_deroulant {
  position: relative; }
  .menu_deroulant > button.lien_menu {
    display: inline-flex;
    align-items: center;
    gap: 5px; }
    .menu_deroulant > button.lien_menu svg {
      flex-shrink: 0;
      opacity: .65;
      transition: transform .15s ease; }
    .menu_deroulant > button.lien_menu[aria-expanded="true"] svg {
      transform: rotate(180deg); }
  .menu_deroulant > ul.menu_plus_liste {
    left: 0;
    right: auto; }

.menu_plus_liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e5e6eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 26, 46, 0.12); }
  .menu_plus_liste li {
    width: 100%; }
  .menu_plus_liste a, .menu_plus_liste .lien_menu, .menu_plus_liste button.lien_menu {
    width: 100%;
    white-space: normal; }

/* ---------------------------------------------------------------------- */
/*  3. Les cartes                                                          */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction) {
  background-color: var(--club-surface-page, #f7f8fb);
  /* La bande de chiffres : des cellules qui respirent, un trait qui
     ne coupe plus la carte en six. */
  /* Les rangées dépliantes deviennent des cartes posées les unes sous
     les autres, séparées par de l'air. */
  /* L'état vide : une carte, pas un cadre en pointillés. */
  /* La barre d'écran : posée sur la surface de page, sans filet dur. */ }
  body:not(#page_accueil):not(#page__en_construction) .bloc_text,
  body:not(#page_accueil):not(#page__en_construction) .encart_page,
  body:not(#page_accueil):not(#page__en_construction) .chiffres_bord,
  body:not(#page_accueil):not(#page__en_construction) .list_form,
  body:not(#page_accueil):not(#page__en_construction) .tableau_defilant,
  body:not(#page_accueil):not(#page__en_construction) .vide,
  body:not(#page_accueil):not(#page__en_construction) .carte_donnee,
  body:not(#page_accueil):not(#page__en_construction) .feuille_seance {
    border-radius: 10px;
    border-color: var(--club-ligne, #e5e6eb);
    box-shadow: 0 1px 2px rgba(22, 26, 46, 0.05); }
  body:not(#page_accueil):not(#page__en_construction) .bloc_text,
  body:not(#page_accueil):not(#page__en_construction) .encart_page {
    background: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    padding: 22px 24px; }
  body:not(#page_accueil):not(#page__en_construction) .chiffres_bord {
    gap: 0; }
    body:not(#page_accueil):not(#page__en_construction) .chiffres_bord .chiffre {
      padding: 16px 18px;
      border-color: var(--club-ligne, #e5e6eb); }
  body:not(#page_accueil):not(#page__en_construction) .list_form {
    background: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    margin-bottom: 10px;
    overflow: hidden; }
  body:not(#page_accueil):not(#page__en_construction) .slide_form {
    border-radius: 0 0 10px 10px; }
  body:not(#page_accueil):not(#page__en_construction) .vide {
    background: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    padding: 30px 26px; }
  body:not(#page_accueil):not(#page__en_construction) .tuile {
    border-radius: 10px;
    border-color: var(--club-ligne, #e5e6eb);
    box-shadow: 0 1px 2px rgba(22, 26, 46, 0.05); }
  body:not(#page_accueil):not(#page__en_construction) .barre_ecran {
    background: transparent;
    border-bottom: 0;
    padding-left: 0;
    padding-right: 0; }

/* ---------------------------------------------------------------------- */
/*  4. Les onglets, en pastilles                                           */
/* ---------------------------------------------------------------------- */
/*  LES ONGLETS SONT LE CONTENEUR ARRONDI.
 *
 *  La barre du haut est un bandeau : elle porte l'identité du club et
 *  traverse la page de bord en bord. Les onglets, eux, appartiennent à
 *  l'écran ouvert — ils se rangent donc dans la colonne du contenu, et
 *  la pastille dit qu'ils forment un groupe, pas une seconde barre de
 *  navigation.
 *
 *  La barre héritait d'un décalage de deux cent quarante-huit pixels,
 *  celui du rail, et se collait sous le fil d'Ariane en position
 *  collante. Les deux disparaissent : elle suit la largeur réglée par
 *  le club, comme le contenu et le pied.                               */
.onglets {
  position: static;
  top: auto;
  width: auto;
  /*  La colonne du contenu, remplissage déduit : « --club-largeur »
      est la largeur du conteneur, bordure comprise, et celui-ci porte
      vingt-six pixels de gouttière de chaque côté. Sans cette
      soustraction, la pastille dépassait la carte qu'elle annonce de
      vingt-six pixels de part et d'autre. */
  max-width: calc(var(--club-largeur, 1240px) - 52px);
  margin: 0 auto 18px;
  padding: 5px;
  gap: 4px;
  background-color: var(--club-carte-fond, #fff);
  border: 1px solid var(--club-carte-trait, #e5e6eb);
  border-radius: 50px;
  box-shadow: var(--club-carte-ombre, 0 1px 2px rgba(22, 26, 46, 0.05));
  /*  Un groupe de neuf onglets sur un téléphone ne se replie pas en
      pastille : il défile. « flex-wrap » les empilerait sur trois
      lignes dans un contour arrondi, ce qui ne veut plus rien dire. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /*  L'onglet ouvert est une pastille pleine, et non un trait sous le
      mot : dans un contour arrondi, un soulignement se lit comme une
      rature. */ }
  .onglets::-webkit-scrollbar {
    display: none; }
  .onglets .onglet {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 50px;
    background: transparent;
    color: var(--club-carte-doux, #616371);
    font-size: 13.5px; }
    .onglets .onglet:hover, .onglets .onglet:focus-visible {
      background: var(--club-carte-rayure, #f7f8fb);
      color: var(--club-carte-texte, #161a2e); }
  .onglets .onglet_actif, .onglets .onglet_actif:hover, .onglets .onglet_actif:focus {
    background: var(--club-principale-claire, #eef0f9);
    color: var(--club-principale-fonce, #232c6b);
    font-weight: 500;
    border-bottom-color: transparent;
    box-shadow: none; }

/*  La barre d'onglets suivait le décalage du rail, à deux endroits dont
    un dans une requête de média. Les deux sont défaits ici, pour les
    écrans qui portent la barre haute. */
body:not(#page_accueil):not(#page__en_construction).espace_club .onglets {
  margin-left: auto;
  margin-right: auto;
  padding: 5px; }

/* ---------------------------------------------------------------------- */
/*  5. Les commandes                                                       */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction) {
  /* Les champs suivent les cartes : même angle, même trait. */
  /* Les pastilles d'état : arrondies, comme dans la maquette. */ }
  body:not(#page_accueil):not(#page__en_construction) .btn {
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0; }
  body:not(#page_accueil):not(#page__en_construction) .btn_small {
    border-radius: 6px; }
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="text"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="email"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="password"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="number"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="date"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset input[type="tel"],
  body:not(#page_accueil):not(#page__en_construction) form fieldset select,
  body:not(#page_accueil):not(#page__en_construction) form fieldset textarea {
    border-radius: 8px;
    border-color: var(--club-ligne, #e5e6eb); }
  body:not(#page_accueil):not(#page__en_construction) .puce {
    border-radius: 20px; }

/* ---------------------------------------------------------------------- */
/*  6. Le téléphone                                                        */
/* ---------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute {
    position: relative;
    flex-wrap: wrap;
    padding: 12px 18px;
    gap: 12px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > div {
      flex-wrap: wrap;
      gap: 12px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ main .container {
    margin: 18px auto 28px;
    padding: 0 18px; }

  /* Le menu se replie derrière le bouton, et se déroule en pile : une
     barre horizontale n'a pas de sens sur 390 pixels. */
  .barre_haute .menu_barre {
    display: none;
    width: 100%; }

  .barre_haute.menu_ouvert .menu_barre {
    display: block; }

  .barre_haute .menu_barre .sous_menu {
    flex-direction: column;
    align-items: stretch;
    gap: 1px; }

  .barre_haute .menu_barre .sous_menu a,
  .barre_haute .menu_barre .sous_menu .lien_menu {
    padding: 11px 13px;
    white-space: normal; }

  /* Sur téléphone tout est déplié : le repli n'a plus d'objet. */
  .barre_haute .menu_plus {
    display: none; }

  .barre_haute.menu_ouvert .menu_deroulant > button.lien_menu svg {
    display: none; }

  .barre_haute.menu_ouvert .menu_deroulant > ul.menu_plus_liste,
  .barre_haute.menu_ouvert .menu_deroulant > ul.menu_plus_liste[hidden] {
    position: static;
    display: flex;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 8px;
    min-width: 0;
    max-height: none;
    overflow: visible; }

  /*  La pastille des onglets prend la gouttière de la page : à pleine
      largeur, ses coins arrondis se coupent aux bords de la vitre et
      le premier onglet colle au verre. Elle défile en elle-même, ce
      qui reste vrai après cette marge. */
  body:not(#page_accueil):not(#page__en_construction).espace_club nav.onglets {
    margin-left: 18px;
    margin-right: 18px; }

  header.left_header.barre_haute ~ main .barre_ecran {
    top: 0; } }
/* ---------------------------------------------------------------------- */
/*  7. Ce que la colonne imposait encore                                   */
/* ---------------------------------------------------------------------- */
/*  Trois corrections constatées à l'écran, pas à la lecture du code.      */
/* L'attribut « hidden » masque en posant « display: none ». Toute règle
   qui donne un display explicite le défait : le panneau de « Plus »
   restait donc ouvert en permanence, par-dessus le contenu. */
.menu_plus[hidden],
.menu_plus_liste[hidden] {
  display: none; }

/* Un déroulant rangé dans « Plus » (ou déplié au téléphone) n'ouvre
   plus un second panneau : le bouton devient un titre, les enfants
   restent visibles. */
#menu_plus_liste > .menu_deroulant > button.lien_menu {
  font-weight: 600;
  cursor: default;
  pointer-events: none; }
  #menu_plus_liste > .menu_deroulant > button.lien_menu svg {
    display: none; }

#menu_plus_liste > .menu_deroulant > ul.menu_plus_liste,
#menu_plus_liste > .menu_deroulant > ul.menu_plus_liste[hidden] {
  position: static;
  display: flex;
  box-shadow: none;
  border: 0;
  padding: 0 0 0 8px;
  min-width: 0;
  max-height: none;
  overflow: visible; }

/* La colonne peignait l'entrée ouverte avec la couleur du rail sombre,
   en « !important » : sur fond clair, la pastille de la direction B
   sortait presque noire.
   
   Le préfixe « body:not(#…):not(#…) » n'est pas décoratif : un :not()
   qui porte un identifiant compte comme un identifiant dans le calcul
   de spécificité. Sans lui, la règle d'en face vaut deux identifiants
   de plus et gagne, « !important » ou pas. */
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li a.active,
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li button.lien_menu.active {
  background-color: var(--club-principale-claire, #eef0f9) !important;
  color: var(--club-principale-fonce, #232c6b) !important;
  /* Le liseré de trois pixels marquait l'entrée ouverte dans une
     colonne. Sur une pastille, il la barre. */
  box-shadow: none;
  font-weight: 500; }
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li a,
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li .lien_menu {
  color: var(--club-texte-doux, #616371); }
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li a:hover,
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li a:focus,
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li .lien_menu:hover,
body:not(#page_accueil):not(#page__en_construction) .menu_barre .sous_menu li .lien_menu:focus {
  background-color: var(--club-surface-page, #f7f8fb);
  color: var(--club-texte, #161a2e);
  box-shadow: none; }
body:not(#page_accueil):not(#page__en_construction) .menu_plus_liste li a,
body:not(#page_accueil):not(#page__en_construction) .menu_plus_liste li .lien_menu {
  color: var(--club-texte, #161a2e); }

/* Le pied de page était la seconde colonne : une plaque de 248 pixels
   collée en bas à gauche, sous le rail. Sans rail, il redevient une
   bande sous le contenu. */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer {
  position: static;
  width: auto;
  max-width: 1240px;
  min-height: 0;
  height: auto;
  margin: 0 auto 26px;
  padding: 18px 26px;
  background: transparent;
  border-top: 1px solid var(--club-ligne, #e5e6eb);
  /* Le pied longeait le rail : son bord droit dessinait la
     séparation entre la colonne et le contenu. Sans colonne, il ne
     restait qu'un trait vertical au milieu du blanc. */
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  color: var(--club-texte-doux, #616371);
  		/*  Les deux paragraphes du pied portaient la couleur du texte du
  		    rail, un gris presque blanc : lisible sur #1F1F1F, invisible
  		    sur la bande claire. Le « !important » répond au leur : la
  		    règle d'en face le pose, et la spécificité seule ne suffit
  		    pas à le défaire.
  
  		    La taille remonte aussi. Les dix pixels et demi payaient la
  		    place dans une colonne de deux cent quarante-huit pixels, où
  		    chaque pixel de police coûtait cinquante-deux pixels de
  		    menu. Une bande pleine largeur n'a pas ce budget à tenir.  */ }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer p, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer span, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer li, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer small, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer .small {
    color: var(--club-texte-doux, #616371) !important;
    font-size: 12px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer a {
    color: var(--club-texte-doux, #616371) !important;
    font-size: 12px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer a:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer a:focus {
    color: var(--club-texte, #161a2e) !important; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ footer p b {
    font-size: 12.5px !important; }

/* Sur téléphone, l'en-tête empilait l'enseigne, le bouton de menu et le
   bouton d'événement sur trois lignes : deux cents pixels avant le
   premier mot de l'écran. L'enseigne et le bouton de menu tiennent sur
   une ligne, l'événement passe dans le menu déplié. */
@media screen and (max-width: 1000px) {
  body:not(#page_accueil):not(#page__en_construction) {
    /*  La barre d'écran, sous l'en-tête : elle n'avait pas de marge
        latérale, le fil d'Ariane commençait au bord gauche de la
        vitre et le nom du compte se coupait au bord droit. Elle prend
        la gouttière de la page. */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute {
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 12px;
      /*  L'enseigne garde sa largeur, le bouton prend le reste.
          Posée en « 1 1 auto » avec une largeur minimale nulle,
          elle se laissait comprimer à vingt pixels par un bouton
          qui, lui, ne se comprimait pas : le logo sortait coupé en
          deux. */ }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > div:first-child {
        order: 1;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 42%; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .action_reserver {
        order: 2;
        flex: 0 0 auto; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > button.menu_mobile {
        order: 3;
        flex: 0 0 auto;
        width: auto;
        min-width: 96px;
        margin: 0 0 0 auto;
        padding: 8px 34px 8px 12px;
        overflow: visible;
        white-space: nowrap;
        text-overflow: unset;
        /*  Le libellé prenait la couleur du texte de la colonne,
            un gris presque blanc, sur un bouton devenu blanc. */
        color: var(--club-texte, #161a2e); }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > a.btn {
        display: none; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > nav.menu_barre {
        order: 4; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute ~ main .barre_ecran {
      padding-left: 18px;
      padding-right: 18px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute.menu_ouvert {
      flex-wrap: wrap; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute.menu_ouvert > nav.menu_barre {
      flex-basis: 100%;
      width: 100%; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute.menu_ouvert > a.btn {
      display: block;
      order: 5;
      width: 100%; } }
/* ---------------------------------------------------------------------- */
/*  8. Les deux actions de la barre, et le volet de réservation            */
/* ---------------------------------------------------------------------- */
/*  Trois pièces de la colonne restaient dessinées pour une colonne : le
    bouton « Réserver » et son volet, qui s'ouvrait DANS la colonne, et le
    lien vers les événements, dont le contour clair sur fond sombre passait
    en gris pâle sur fond blanc.

    Le préfixe « body:not(#…):not(#…) » est celui des règles du rail : deux
    :not() à identifiant, qu'aucune classe ne surpasse.                    */
body:not(#page_accueil):not(#page__en_construction) {
  	/*  L'entrée qui porte la réservation.
  
  	    Elle était collante et peinte de la couleur du rail, pour rester
  	    en vue pendant que trente-quatre entrées défilaient sous elle.
  	    Dans une barre, rien ne défile : il ne restait qu'une plaque
  	    noire à gauche du menu. Elle redevient une entrée ordinaire, et
  	    sert d'ancre au volet qui s'ouvre sous elle.                     */
  /*  L'action principale du produit : le seul aplat plein de la barre. */
  /*  Hors de l'écran de réservation, la même action est un lien vers
      cet écran. Elle porte le même aplat : sans lui, la barre montrait
      deux « Réserver » gris côte à côte — celui-ci et l'entrée de menu
      qui mène au même endroit — sans que rien ne dise lequel est
      l'action et lequel est l'entrée.                                 */
  	/*  LE VOLET DE RÉSERVATION.
  
  	    Il occupait toute la largeur de la colonne, sous le bouton, cerné
  	    d'un double anneau incrusté de la couleur du club. Posé dans une
  	    barre haute, il se retrouvait dans une entrée de cent dix-huit
  	    pixels de large : les deux champs ne pouvaient plus être remplis,
  	    et l'écran de réservation devenait inutilisable.
  
  	    Il devient un panneau flottant, ancré sous son bouton, à la même
  	    facture que le panneau « Plus » : fond de la page, un trait, dix
  	    pixels de rayon, une ombre portée qui le décolle du contenu.
  
  	    Le volet de la colonne partait en « display: none ». Sorti du
  	    menu, cette déclaration ne le suivait plus : le panneau et son
  	    calendrier s'affichaient dès l'arrivée sur l'écran, par-dessus
  	    le contenu. jQuery slideDown / slideUp pose ensuite display.    */
  	/*  LE LIEN VERS LES ÉVÉNEMENTS.
  
  	    Contour et texte venaient des couleurs du rail : un gris clair
  	    sur un gris foncé. Sur la barre blanche, l'action se lisait en
  	    #CECECE sur #FFFFFF — un rapport de contraste de 1,3. Elle prend
  	    la facture des boutons de contour du produit : c'est la seconde
  	    action de la barre, pas la première.                             */ }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver {
    position: relative;
    top: auto;
    background: transparent;
    z-index: 30;
    /*  Elle sert d'ancre au volet, qui se place à « 100 % » de sa
        hauteur. Or l'ouverture du volet escamote le bouton, seul
        contenu de l'entrée : la hauteur tombait à zéro et le volet
        remontait se poser sur la barre. La hauteur minimale est
        celle du bouton, et ne bouge plus selon ce qu'il advient de
        lui.                                                         */
    min-height: 36px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 9px 16px;
    border-radius: 8px;
    background-color: var(--club-bouton, #2f3a8f);
    color: var(--club-bouton-texte, #fff);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
    /*  Le chevron de la colonne annonçait un dépliement vers le bas
        dans une liste verticale. Le volet s'ouvre maintenant sous la
        barre : la flèche n'indique plus rien que le bouton ne dise. */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver::after {
      display: none !important; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver:focus {
      background-color: var(--club-principale-fonce, #232c6b);
      color: var(--club-bouton-texte, #fff); }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 9px 16px;
    border-radius: 8px;
    background-color: var(--club-bouton, #2f3a8f);
    color: var(--club-bouton-texte, #fff);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien:focus {
      background-color: var(--club-principale-fonce, #232c6b);
      color: var(--club-bouton-texte, #fff); }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form {
    display: none;
    position: absolute;
    /*  Sous la barre, et non sous le bouton : l'entrée est centrée
        dans les soixante-deux pixels de la barre, il reste treize
        pixels sous elle.                                            */
    top: calc(100% + 19px);
    left: 0;
    width: 340px;
    max-width: calc(100vw - 40px);
    /*  Le haut est dégagé pour la croix de fermeture : posée dans le
        coin d'un volet de seize pixels de marge, elle chevauchait le
        champ de date.                                               */
    padding: 40px 16px 16px;
    background: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e5e6eb);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(22, 26, 46, 0.16);
    overflow: visible;
    /*  « form fieldset » vaut 50 % : dans un panneau de 340 px les
        libellés et le créneau se coupaient au milieu.              */
    /*  Les champs s'écrivaient en blanc, en « !important » : c'était
        la couleur qu'il fallait sur le fond de marque du volet de la
        colonne. Sur un panneau blanc, la date saisie et le créneau
        choisi devenaient invisibles. Le sélecteur reprend celui de
        la règle d'en face, ses trois états compris, pour que le
        « !important » ne joue pas seul.
        « -webkit-text-fill-color » double la déclaration : sur
        WebKit, il l'emporte sur « color » pour le texte saisi.      */
    /*  Le rail écrivait ses invites en blanc, en « !important » :
        sur un panneau clair elles disparaissaient.                  */
    /*  La croix de fermeture : un caractère discret dans le coin, et
        non un carré noir posé sur le bord du volet.                 */ }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset {
      width: 100%;
      max-width: 100%;
      margin-bottom: 10px;
      overflow: visible; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form label, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form select, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form input, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form option {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      overflow-wrap: anywhere;
      max-width: 100%; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset select:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset input:hover,
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset select:focus, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset input:focus,
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset select, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset input {
      height: 42px;
      padding: 3px 10px;
      background-color: var(--club-fond, #fff);
      border: 1px solid var(--club-ligne, #e5e6eb);
      border-radius: 8px;
      color: var(--club-texte, #161a2e) !important;
      -webkit-text-fill-color: var(--club-texte, #161a2e);
      font-size: 13.5px; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset select:focus, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form fieldset input:focus {
      border-color: var(--club-principale, #2f3a8f); }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form ::-webkit-input-placeholder {
      color: var(--club-texte-doux, #616371) !important; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form ::-moz-placeholder {
      color: var(--club-texte-doux, #616371) !important; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form :-ms-input-placeholder {
      color: var(--club-texte-doux, #616371) !important; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form ::placeholder {
      color: var(--club-texte-doux, #616371) !important; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form button.btn {
      width: 100%;
      padding: 11px 14px;
      font-size: 14.5px;
      border-radius: 8px;
      background-color: var(--club-bouton, #2f3a8f);
      color: var(--club-bouton-texte, #fff); }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form button.btn:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form button.btn:focus {
        background-color: var(--club-principale-fonce, #232c6b);
        color: var(--club-bouton-texte, #fff); }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form #close_form {
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 8px;
      background-color: transparent;
      color: var(--club-texte-doux, #616371);
      font-size: 13px; }
      body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form #close_form:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form #close_form:focus {
        background-color: var(--club-surface-page, #f7f8fb);
        color: var(--club-texte, #161a2e); }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn_event {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 9px 14px;
    border: 1px solid var(--club-ligne, #e5e6eb);
    border-radius: 8px;
    background: var(--club-fond, #fff);
    color: var(--club-texte, #161a2e);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(22, 26, 46, 0.05); }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn_event:hover, body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn_event:focus {
      background: var(--club-surface-page, #f7f8fb);
      border-color: var(--club-principale, #2f3a8f);
      color: var(--club-principale-fonce, #232c6b); }

/*  Sur téléphone, Réserver reste dans la barre, hors du menu. Le volet
    s'ouvre sous le bouton, comme sur un grand écran. */
@media screen and (max-width: 1000px) {
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver > form {
    left: auto;
    right: 0; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver,
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien {
    display: inline-flex;
    width: auto;
    justify-content: center; } }
/*  LE CALENDRIER DU CHAMP DE DATE, SOUS LA BARRE.

    Le conteneur des calendriers est posé en bas du corps de page, et la
    feuille le remonte de quatre-vingt-dix pixels — un réglage d'origine,
    hérité, qui vaut pour tous les champs de date du produit.

    Dans le volet de la barre, ce réglage plaçait le calendrier par-dessus
    la barre ET par-dessus le champ qu'il sert : on ne voyait plus la date
    qu'on venait de saisir. Le calendrier reprend donc sa place naturelle,
    sous son champ, sur les écrans qui portent la barre — et seulement là :
    le sélecteur exige un « header.barre_haute » avant lui, que les pages
    du site n'ont pas.                                                    */
header.left_header.barre_haute ~ .datepickers-container,
header.left_header.barre_haute ~ .datepicker-container {
  margin-top: 0; }

/* ====================================================================== */
/*  9. CE QUE LE CLUB RÈGLE                                               */
/* ====================================================================== */
/*  Trente réglages de plus, et la feuille les lit ici plutôt que de les
    répartir dans deux cents règles.

    Chacun arrive en variable, avec la valeur livrée en repli : un club
    qui ne touche à rien voit exactement la direction B, et la feuille
    reste lisible sans avoir à connaître la base.                        */
/* ---------------------------------------------------------------------- */
/*  9.1  Le fond de l'espace                                              */
/* ---------------------------------------------------------------------- */
/*  Le fond lui-même est posé par l'en-tête, sur « html » : il peut porter
    une image en attache fixe, et une image fixe se cale sur la fenêtre,
    pas sur le corps de la page. Le corps le laisse donc transparaître.

    Sans image, « --club-espace-fond » suffit ; la règle vaut pour les
    deux cas.                                                            */
/*  LE CORPS NE PEINT PLUS RIEN.
 *
 *  Le fond réglé par le club est posé sur « html » par l'en-tête : une
 *  image en attache fixe se cale sur la fenêtre, et c'est la seule
 *  façon qu'elle coïncide avec la copie que porte la barre translucide.
 *  Le corps doit donc le laisser passer — il portait la surface de page
 *  déduite, opaque, qui recouvrait l'image entière.
 *
 *  Le préfixe reprend celui de la règle qu'il défait : deux « :not » à
 *  identifiant, qu'une simple classe ne surpasse pas.                  */
body:not(#page_accueil):not(#page__en_construction).espace_club {
  background: transparent;
  /* La photo d'accueil recouvrait le fond de l'espace. */
  /* L'échelle du texte. Elle multiplie la taille de base, celle dont
     toutes les autres se déduisent : un club dont les membres lisent
     l'écran de loin l'agrandit d'un cran, et tout suit. */
  font-size: calc(14px * var(--club-echelle, 1)); }
  body:not(#page_accueil):not(#page__en_construction).espace_club #background {
    display: none; }

/* La surface de page, celle qui portait le gris bleuté déduit, prend
   la couleur réglée par le club. */
body.espace_club .container,
body.espace_club main {
  background-color: transparent; }

/*  CE QUI VIT HORS DES CARTES.
 *
 *  Le fil d'Ariane et le pied de page ne sont sur aucune carte : ils se
 *  posent directement sur le fond de l'espace. Ils portaient l'encre du
 *  site, celle d'une page blanche ; sur un fond sombre ou sur une photo,
 *  le chemin et le nom du compte devenaient illisibles. Ils prennent
 *  l'encre déduite du fond de page, comme les cartes prennent la leur. */
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran {
  color: var(--club-espace-texte, #161a2e); }
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran .fil_groupe,
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran .fil_separateur,
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran .fil_nom {
  color: var(--club-espace-doux, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran .fil_courant {
  color: var(--club-espace-texte, #161a2e); }
body:not(#page_accueil):not(#page__en_construction).espace_club .barre_ecran .fil_role {
  color: var(--club-espace-doux, #616371);
  border-color: var(--club-espace-doux, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer {
  border-top-color: var(--club-espace-doux, #e5e6eb); }
  body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer p, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer span, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer li, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer small, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer .small, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer a {
    color: var(--club-espace-doux, #616371) !important; }
  body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer a:hover, body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer a:focus {
    color: var(--club-espace-texte, #161a2e) !important; }

/* ---------------------------------------------------------------------- */
/*  9.2  La barre                                                          */
/* ---------------------------------------------------------------------- */
/*  LE PRÉFIXE N'EST PAS DÉCORATIF.
 *
 *  Le bloc qui habillait la colonne sombre est préfixé de
 *  « body:not(#page_accueil):not(#page__en_construction) », et un
 *  « :not » qui porte un identifiant compte comme un identifiant. Une
 *  règle en « body.espace_club » pèse deux identifiants de moins et se
 *  fait écraser, quelle que soit sa place dans le fichier. Les règles
 *  du club reprennent donc le même préfixe, et gagnent à égalité par
 *  leur position — celle-ci est plus bas.                              */
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .logo_club a {
  color: var(--club-barre-fort, #161a2e); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li a,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li .lien_menu {
  color: var(--club-barre-texte, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li a.active {
  background-color: var(--club-barre-actif, #eef0f9) !important;
  color: var(--club-barre-fort, #232c6b) !important; }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li a:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li a:focus,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li .lien_menu:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li .lien_menu:focus {
  background-color: var(--club-barre-trait, #f7f8fb);
  color: var(--club-barre-fort, #161a2e); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute #btn_menu_plus {
  color: var(--club-barre-texte, #616371);
  border-color: var(--club-barre-trait, #e5e6eb); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_deroulant > button.lien_menu {
  color: var(--club-barre-texte, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_deroulant > button.lien_menu.active {
  background-color: var(--club-barre-actif, #eef0f9);
  color: var(--club-barre-fort, #232c6b); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .btn_event {
  border-color: var(--club-barre-trait, #e5e6eb);
  background: transparent;
  color: var(--club-barre-fort, #161a2e); }

/* La barre translucide : le fond de la page se devine derrière elle,
   flouté. Le club l'allume, et la règle ne coûte rien tant qu'il ne le
   fait pas — « --club-barre-flou » ne vaut « oui » que s'il l'a posé.

   « backdrop-filter » n'est pas connu partout ; là où il manque, la
   barre reste un aplat plein, ce qui est le comportement voulu. */
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute.barre_translucide {
  background: color-mix(in srgb, var(--club-barre-fond, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px); }

/* ---------------------------------------------------------------------- */
/*  9.3  Les cartes, les tableaux, les boutons                             */
/* ---------------------------------------------------------------------- */
/*  Même préfixe qu'en 9.2, et pour la même raison.                       */
body:not(#page_accueil):not(#page__en_construction).espace_club {
  /* Les surfaces intérieures d'une carte : elles étaient peintes en
     blanc, ce qui allait tant que la carte l'était aussi. Elles
     reprennent le fond de la carte, et les lignes alternées une trace
     de ce même fond. */
  /* Le texte secondaire garde son rang : plus discret que le texte
     courant, lisible sur les deux clartés de fond. */
  /* Les titres : leur police, leur casse et leur graisse se règlent
     indépendamment du texte. Un club qui veut des titres en capitales
     étroites sur un texte en Plex le peut. */
  	/*  UN LIEN QUI EST UN BOUTON N'EST PAS UN LIEN.
  
  	    La regle « a » ci-dessus porte la specificite de ce bloc, qui
  	    compte deux identifiants : elle l'emportait sur « .btn » comme
  	    sur « .lien_tri.actif », dont la couleur de texte est declaree a
  	    une seule classe. Les liens habilles en bouton recevaient donc la
  	    couleur des liens du club, c'est-a-dire la couleur principale, sur
  	    un aplat peint de cette meme couleur principale. Mesure : 1,0 pour
  	    un — un bouton dont l'intitule est invisible.
  
  	    Etaient concernes « Revenir a mon compte » de toutes les cartes
  	    d'acces refuse, « Choisir ma seance » de l'ecran de reservation,
  	    l'action des etats vides, et les pastilles de tri et de filtre
  	    actives des listes. Le texte des aplats pleins reprend la couleur
  	    de texte des boutons, blanche par defaut.                        */
  /*  Les variantes qui ne sont PAS un aplat plein gardent leur encre :
      les repeindre en blanc les rendrait illisibles a leur tour.       */
  /* La densité d'un tableau, c'est la hauteur de ses cellules : c'est
     elle qui décide combien de lignes tiennent à l'écran, et rien
     d'autre. */ }
  body:not(#page_accueil):not(#page__en_construction).espace_club section, body:not(#page_accueil):not(#page__en_construction).espace_club .bloc_text, body:not(#page_accueil):not(#page__en_construction).espace_club .tuile, body:not(#page_accueil):not(#page__en_construction).espace_club .chiffres_bord, body:not(#page_accueil):not(#page__en_construction).espace_club .list_form, body:not(#page_accueil):not(#page__en_construction).espace_club .cadre {
    background-color: var(--club-carte-fond, #fff);
    border-color: var(--club-carte-trait, #e5e6eb);
    border-radius: var(--club-carte-arrondi, 10px);
    box-shadow: var(--club-carte-ombre, 0 1px 2px rgba(22, 26, 46, 0.05));
    		/* L'ENCRE SUIT LE FOND.
    
    		   Un club qui choisit un fond de carte sombre obtenait des
    		   cartes noires portant le texte foncé du site, mesuré à 1,1
    		   pour un. Offrir le réglage du fond sans en déduire l'encre,
    		   c'est offrir le moyen de rendre son propre espace illisible,
    		   et la panne n'apparaît qu'après l'enregistrement. L'encre est
    		   déduite de la clarté du fond, comme celle de la barre. */
    color: var(--club-carte-texte, #161a2e); }
  body:not(#page_accueil):not(#page__en_construction).espace_club section table, body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_defilant, body:not(#page_accueil):not(#page__en_construction).espace_club .bloc_vide, body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance,
  body:not(#page_accueil):not(#page__en_construction).espace_club .chiffres_bord .chiffre, body:not(#page_accueil):not(#page__en_construction).espace_club .tuile {
    background-color: transparent; }
  body:not(#page_accueil):not(#page__en_construction).espace_club section p, body:not(#page_accueil):not(#page__en_construction).espace_club section li, body:not(#page_accueil):not(#page__en_construction).espace_club section td, body:not(#page_accueil):not(#page__en_construction).espace_club section th, body:not(#page_accueil):not(#page__en_construction).espace_club section span,
  body:not(#page_accueil):not(#page__en_construction).espace_club section label, body:not(#page_accueil):not(#page__en_construction).espace_club section dt, body:not(#page_accueil):not(#page__en_construction).espace_club section dd, body:not(#page_accueil):not(#page__en_construction).espace_club .bloc_text p {
    color: inherit; }
  body:not(#page_accueil):not(#page__en_construction).espace_club section .middle, body:not(#page_accueil):not(#page__en_construction).espace_club section small, body:not(#page_accueil):not(#page__en_construction).espace_club section .small, body:not(#page_accueil):not(#page__en_construction).espace_club section .aide_reglage,
  body:not(#page_accueil):not(#page__en_construction).espace_club section .fil_groupe, body:not(#page_accueil):not(#page__en_construction).espace_club .chiffres_bord .chiffre span {
    color: var(--club-carte-doux, #616371); }
  body:not(#page_accueil):not(#page__en_construction).espace_club h1, body:not(#page_accueil):not(#page__en_construction).espace_club h2, body:not(#page_accueil):not(#page__en_construction).espace_club h3, body:not(#page_accueil):not(#page__en_construction).espace_club h4, body:not(#page_accueil):not(#page__en_construction).espace_club h5, body:not(#page_accueil):not(#page__en_construction).espace_club h6 {
    font-family: var(--club-police-titres, var(--club-police));
    text-transform: var(--club-titres-casse, none);
    font-weight: var(--club-titres-graisse, 600); }
  body:not(#page_accueil):not(#page__en_construction).espace_club .btn, body:not(#page_accueil):not(#page__en_construction).espace_club button.btn, body:not(#page_accueil):not(#page__en_construction).espace_club a.btn, body:not(#page_accueil):not(#page__en_construction).espace_club input[type="submit"] {
    border-radius: var(--club-bouton-arrondi, 8px);
    text-transform: var(--club-bouton-casse, none); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a {
    color: var(--club-lien, #2f3a8f); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a:hover, body:not(#page_accueil):not(#page__en_construction).espace_club a:focus {
    color: var(--club-lien-survol, #232c6b); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn:hover,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn:focus,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn[aria-current],
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn[aria-current]:hover,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn[aria-current]:focus,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri.actif,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri.actif:hover,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri.actif:focus,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri[aria-current],
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri[aria-current]:hover,
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri[aria-current]:focus {
    color: var(--club-bouton-texte, #fff); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_white {
    color: var(--club-principale, #39449f); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_white:hover, body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_white:focus {
    color: var(--club-principale-fonce, #232c6b); }
  /*  LE SECONDAIRE N'EST PLUS UN APLAT, SON ENCRE NE PEUT PLUS ÊTRE
      BLANCHE. « btn_grey » était un aplat sombre et portait donc une
      encre blanche, posée ici avec deux identifiants de poids. Le jour
      où le bouton est devenu clair, cette règle a continué de gagner :
      du blanc sur du blanc, c'est-à-dire un bouton vide. C'était le cas
      de « S'inscrire » sur les quatre pages publiques.               */
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_grey {
    color: var(--club-principale, #39449f); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_grey:hover, body:not(#page_accueil):not(#page__en_construction).espace_club a.btn.btn_grey:focus {
    color: var(--club-principale-fonce, #2b3377); }
  body:not(#page_accueil):not(#page__en_construction).espace_club a.lien_tri {
    color: var(--club-principale, #39449f); }
  body:not(#page_accueil):not(#page__en_construction).espace_club table td, body:not(#page_accueil):not(#page__en_construction).espace_club table th {
    padding-top: var(--club-tableau-espace, 10px);
    padding-bottom: var(--club-tableau-espace, 10px); }

/* Les lignes alternées. Le club peut leur préférer un simple filet :
   sur un fond de carte teinté, une rayure de plus brouille la lecture.
   La classe est posée par le corps de page, pas par chaque tableau. */
/*  Les lignes alternées portent leur teinte sur les CELLULES : c'est là
    que la règle d'origine la posait, et un fond posé sur la ligne passe
    dessous sans se voir. La teinte est une trace du fond de la carte,
    et non la couleur de la page : sur une carte sombre posée sur une
    page sombre, les deux se confondaient. */
body:not(#page_accueil):not(#page__en_construction).espace_club.tableaux_rayes tbody tr:nth-child(even) td {
  background-color: var(--club-carte-rayure, #f7f8fb); }

/*  Le club peut leur préférer un simple filet. La règle d'origine
    teinte une ligne sur deux sans rien demander : sans cette remise à
    zéro, décocher les rayures ne changeait rien. */
body:not(#page_accueil):not(#page__en_construction).espace_club:not(.tableaux_rayes) tbody tr:nth-child(even) td {
  background-color: transparent; }

/*  Le survol reprend la même teinte : il pointait la couleur claire de
    l'accent, presque blanche sur une carte sombre. */
body:not(#page_accueil):not(#page__en_construction).espace_club tbody tr:hover td {
  background-color: var(--club-carte-rayure, #f7f8fb); }

/*  Les surfaces creuses — l'état « rien à afficher », son médaillon —
    prenaient la couleur de page. Sur une carte, c'est le fond de la
    carte qui les entoure, pas celui de la page. */
body:not(#page_accueil):not(#page__en_construction).espace_club .vide {
  background-color: var(--club-carte-rayure, #f7f8fb);
  border-color: var(--club-carte-trait, #e5e6eb);
  color: var(--club-carte-doux, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club .vide .vide_signe {
  background-color: var(--club-carte-fond, #fff);
  border-color: var(--club-carte-trait, #e5e6eb);
  color: var(--club-carte-doux, #616371); }
body:not(#page_accueil):not(#page__en_construction).espace_club .chiffres_bord .chiffre b {
  color: var(--club-carte-texte, #161a2e); }

/* ---------------------------------------------------------------------- */
/*  9.4  Le bandeau d'annonce du club                                      */
/* ---------------------------------------------------------------------- */
/*  Une phrase que la gérance pose depuis la configuration et que chaque
    écran de l'espace affiche en tête. Les quatre tons reprennent les
    couleurs d'état du produit — celles qui ne suivent pas la couleur du
    club, parce qu'« urgent » se dit en rouge quelle que soit la marque. */
.bandeau_annonce {
  max-width: var(--club-largeur, 1240px);
  margin: 18px auto 0;
  padding: 12px 18px;
  border: 1px solid;
  border-radius: var(--club-carte-arrondi, 10px);
  font-size: 13.5px;
  line-height: 1.5; }
  .bandeau_annonce p {
    margin: 0; }

.bandeau_info {
  background: var(--club-info-fond, #e8f1f9);
  border-color: var(--club-info-trait, #c6dcee);
  color: var(--club-info, #1f5b8f); }

.bandeau_succes {
  background: var(--club-succes-fond, #e7f4ec);
  border-color: var(--club-succes-trait, #bfe0cd);
  color: var(--club-succes, #1b7a4b); }

.bandeau_attention {
  background: var(--club-attention-fond, #fbf1df);
  border-color: var(--club-attention-trait, #ebd8b0);
  color: var(--club-attention, #8a5a08); }

.bandeau_alerte {
  background: var(--club-alerte-fond, #fbeaea);
  border-color: var(--club-alerte-trait, #efc9c9);
  color: var(--club-alerte, #a32b2b); }

@media screen and (max-width: 1000px) {
  .bandeau_annonce {
    margin: 12px 18px 0;
    padding: 10px 14px; } }
/* ---------------------------------------------------------------------- */
/*  9.4bis  Le bandeau des témoins de mesure                               */
/* ---------------------------------------------------------------------- */
/*  Il ne paraît que si le club mesure son audience et que le visiteur n'a
    pas répondu. Posé en bas, jamais par-dessus le contenu : un bandeau qui
    couvre la page force la réponse, et une réponse forcée n'en est pas une.
    Les deux boutons ont le même rang, la même taille et la même place —
    refuser doit coûter le même geste qu'accepter. */
.bandeau_temoins {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  padding: 14px 20px;
  background: #ffffff;
  border-top: 1px solid #d9dee6;
  box-shadow: 0 -2px 12px rgba(20, 25, 40, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: #2a2f3a; }
  .bandeau_temoins p {
    margin: 0;
    max-width: 720px; }
  .bandeau_temoins a {
    text-decoration: underline; }

.bandeau_temoins_boutons form {
  display: flex;
  gap: 10px;
  margin: 0; }
.bandeau_temoins_boutons .btn {
  margin: 0; }

@media screen and (max-width: 700px) {
  .bandeau_temoins {
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 12.5px; }
  .bandeau_temoins_boutons {
    width: 100%; }
  .bandeau_temoins_boutons form {
    width: 100%; }
  .bandeau_temoins_boutons .btn {
    flex: 1 1 0; } }

/* ---------------------------------------------------------------------- */
/*  9.5  Le pied suit la largeur réglée                                    */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute ~ footer {
  max-width: var(--club-largeur, 1240px); }

/* ====================================================================== */
/*  10. L'ÉCRAN D'ENTRÉE                                                  */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/*  10.1  Une colonne, et non trois calques                               */
/* ---------------------------------------------------------------------- */
/*  L'écran de connexion posait ses trois pièces en couches indépendantes :
    l'en-tête en « position: fixed » à droite, le pied en
    « position: absolute » sur la même bande, et le formulaire entre les
    deux dans un conteneur de 100 vh, le corps de page étant verrouillé
    par « height: 100vh; overflow: hidden ».

    Trois pièces qui ne se connaissent pas ne peuvent pas se pousser. Sur
    une fenêtre basse — un portable en paysage, un écran d'ordinateur à
    barre de favoris, une fenêtre réduite — le pied remontait sur les
    liens « Découvrir / L'équipe / Horaires & tarifs / Photos /
    Conditions » et l'enseigne descendait sur le formulaire. Rien ne
    défilait, puisque la page était coupée à la hauteur de la fenêtre :
    ce qui passait dessous était perdu.

    Les trois pièces redeviennent les trois enfants d'une colonne : le
    contenu pousse le pied vers le bas, et la page défile quand elle est
    plus haute que la fenêtre. Sous 851 px, les règles qui existent déjà
    remettent tout dans le flux et suffisent : ce bloc ne les touche pas. */
@media (min-width: 851px) {
  #page_accueil, #page__en_construction {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-end; }

  #page_accueil > header, #page_accueil > main, #page_accueil > footer,
  #page__en_construction > header, #page__en_construction > main, #page__en_construction > footer {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 500px;
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto; }

  /*  Le milieu prend la place qui reste : c'est lui qui repousse le pied
      au bas d'une fenêtre haute, et c'est lui qui s'allonge sur une
      fenêtre basse plutôt que de laisser le pied lui passer dessus.    */
  #page_accueil > main, #page__en_construction > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; }

  #page_accueil .container_home, #page__en_construction .container_home {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px 0;
    flex: 1 0 auto; }

  /*  Le nom du club posé sur la photo n'appartient pas à la colonne : il
      ne doit ni l'allonger ni la pousser. Il reste un calque, mais un
      calque cadré sur la fenêtre et non sur la colonne, et il ne prend
      pas les clics qui passent au-dessus de la photo.                  */
  #page_accueil .home_texte, #page__en_construction .home_texte {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    width: calc(100% - 500px);
    height: 100vh;
    min-height: 0;
    pointer-events: none; }
    #page_accueil .home_texte a, #page_accueil .home_texte .btn, #page__en_construction .home_texte a, #page__en_construction .home_texte .btn {
      pointer-events: auto; }

  /*  Le pied ne flotte plus : il ferme la colonne, donc il n'a plus de
      coin arrondi à opposer au vide.                                   */
  #page_accueil footer, #page__en_construction footer {
    border-radius: 0; }

  /*  La colonne étroite des fenêtres moyennes, reprise ici parce que les
      règles d'origine la posaient avec une marge gauche calculée, qui
      n'a plus de sens dans une pile alignée à droite.                  */ }
@media (min-width: 851px) and (max-width: 1280px) {
  #page_accueil > header, #page_accueil > main, #page_accueil > footer,
  #page__en_construction > header, #page__en_construction > main, #page__en_construction > footer {
    width: 350px; }

  #page_accueil .home_texte, #page__en_construction .home_texte {
    width: calc(100% - 350px); } }
/* ---------------------------------------------------------------------- */
/*  10.2  Les comptes de démonstration                                    */
/* ---------------------------------------------------------------------- */
/*  Le bloc ne paraît qu'en mode démonstration : il dit ce qu'est ce club,
    ce que chacun des trois rôles voit, et ouvre chacun d'un bouton.      */
.comptes_demo {
  text-align: left;
  padding: 18px 20px 16px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  max-width: 100%;
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  background-color: var(--club-fond, #fff); }
  .comptes_demo h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--club-texte, #161a2e); }
  .comptes_demo > p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
    color: var(--club-texte-doux, #6b6e7b); }
  .comptes_demo code {
    font-family: var(--club-chiffres, ui-monospace, Consolas, monospace);
    font-size: 12.5px; }

.comptes_demo_boutons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px; }
  .comptes_demo_boutons li {
    padding: 12px 0 0;
    border-top: 1px solid var(--club-ligne, #e2e2e2); }
  .comptes_demo_boutons li:first-child {
    border-top: none;
    padding-top: 0; }
  .comptes_demo_boutons .btn {
    width: 100%; }

.comptes_demo_role {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--club-principale, #39449f); }

.comptes_demo_qui {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--club-texte, #161a2e); }

.comptes_demo_voit {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--club-texte-doux, #6b6e7b); }

.comptes_demo_adresse {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--club-texte-doux, #6b6e7b);
  /*  Une adresse électronique ne se coupe pas d'elle-même : dans une
      colonne de 350 px elle élargissait la page.                       */
  overflow-wrap: anywhere; }

.comptes_demo_pied {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--club-texte-doux, #6b6e7b); }

/* ---------------------------------------------------------------------- */
/*  10.3  Le refus de connexion, et le mot de passe que l'on peut relire  */
/* ---------------------------------------------------------------------- */
.erreur_connexion {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--club-alerte-trait, #efc9c9);
  border-radius: var(--club-arrondi, 4px);
  background-color: var(--club-alerte-fond, #fbeaea);
  color: var(--club-alerte, #a32b2b);
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
  text-align: center;
  /*  La région existe avant d'avoir quelque chose à dire : un élément
      ajouté au document en même temps que son texte n'est pas toujours
      annoncé. Vide, elle ne prend ni place ni couleur.                 */
  /*  « Connexion réussie » passe par la même région : elle n'est alors
      pas une alerte de refus.                                          */ }
  .erreur_connexion.vide {
    display: none; }
  .erreur_connexion.erreur_connexion_ok {
    border-color: var(--club-succes-trait, #bfe0cd);
    background-color: var(--club-succes-fond, #e7f4ec);
    color: var(--club-succes, #1b7a4b); }

.champ_mdp {
  position: relative;
  /*  La place du bouton, pour qu'il ne se pose pas sur ce que l'on tape. */ }
  .champ_mdp .bascule_mdp {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: auto;
    min-width: 0;
    /*  La hauteur d'un doigt : le contrôle des commandes tactiles
        mesure 44 px, et ce bouton se trouve sur l'écran le plus
        ouvert depuis un téléphone.                                   */
    min-height: 44px;
    padding: 0 12px;
    border: none;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--club-principale, #39449f);
    cursor: pointer; }
    .champ_mdp .bascule_mdp:hover, .champ_mdp .bascule_mdp:focus {
      color: var(--club-principale-fonce, #232c6b);
      text-decoration: underline; }
  .champ_mdp input[type="password"], .champ_mdp input[type="text"] {
    padding-right: 92px; }

/* ---------------------------------------------------------------------- */
/*  10.4  Un article de boutique sans photo                               */
/* ---------------------------------------------------------------------- */
/*  Le dossier des visuels est vide, et il l'est délibérément : ceux qui
    s'y trouvaient venaient des catalogues des fournisseurs du club
    d'origine. Un article sans photo montre un aplat calme, et non un
    cadre gris qui se lit comme une image qui n'arrive pas.               */
.list_produits .img_sans_photo {
  background-image: none;
  background-color: var(--club-principale-claire, #eef0fc); }

/* ---------------------------------------------------------------------- */
/*  10.5  Le bandeau de démonstration                                     */
/* ---------------------------------------------------------------------- */
/*  Rien ne disait, sur les quarante-deux écrans, que ce club n'existe pas,
    ni ne ramenait aux tarifs du logiciel. Le bandeau le dit une fois, en
    tête de page, et il ne paraît qu'en mode démonstration.

    Il ne suit pas les couleurs du club : c'est une mention de l'éditeur,
    et un club qui prendrait ces teintes ferait disparaître l'avertissement
    dans son propre habillage.                                             */
.bandeau_demo {
  position: relative;
  z-index: 60;
  width: 100%;
  /*  L'écran d'entrée range ses pièces en colonne alignée à droite : le
      bandeau, lui, traverse la fenêtre.                                */
  align-self: stretch;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 9px 18px;
  background-color: #1F2766;
  color: #fff;
  text-align: center; }
  .bandeau_demo p {
    margin: 0 auto;
    max-width: 1240px;
    font-size: 13px;
    line-height: 1.5;
    color: #fff; }
  .bandeau_demo b {
    font-weight: 700; }
  .bandeau_demo a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    /*  Assez haut pour un doigt, sans casser la ligne de texte.      */
    display: inline-block;
    padding: 4px 2px;
    white-space: nowrap; }
  .bandeau_demo a:hover, .bandeau_demo a:focus {
    color: #fff;
    text-decoration: none; }

@media (max-width: 600px) {
  .bandeau_demo {
    padding: 8px 12px; }

  .bandeau_demo p {
    font-size: 12px; } }
/* ---------------------------------------------------------------------- */
/*  10.6  Le champ « Rechercher un membre »                               */
/* ---------------------------------------------------------------------- */
/*  Cinq écrans versaient tous les comptes du club dans une liste
    déroulante : nom, prénom et adresse électronique en clair, une balise
    « option » par personne, réémises à chaque affichage. C'est maintenant
    un champ où l'on écrit, et une liste qui ne porte que ce qui
    correspond.                                                            */
.recherche_membre {
  position: relative;
  flex: 1 1 220px;
  min-width: 0; }
  .recherche_membre label {
    display: block;
    font-size: 12.5px;
    margin-bottom: 4px; }
  .recherche_membre > small {
    display: block;
    font-size: 12px;
    color: var(--club-texte-doux, #6b6e7b);
    margin-top: 4px; }
  .recherche_membre input[type="text"] {
    width: 100%; }

/*  La liste des propositions. Elle flotte au-dessus de ce qui suit :
    posée dans le flux, elle poussait la moitié de l'écran vers le bas à
    chaque lettre tapée.                                                   */
.propositions_membre {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  box-shadow: var(--club-carte-ombre, 0 10px 28px rgba(22, 26, 46, 0.14)); }
  .propositions_membre li {
    padding: 10px 12px;
    /*  La hauteur d'un doigt : ces écrans s'ouvrent au bord du tatami,
        sur un téléphone.                                              */
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 13.5px;
    line-height: 1.4;
    cursor: pointer;
    border-bottom: 1px solid var(--club-ligne, #e2e2e2);
    /*  Une adresse électronique ne se coupe pas d'elle-même.          */
    overflow-wrap: anywhere; }
  .propositions_membre li:last-child {
    border-bottom: none; }
  .propositions_membre li:hover,
  .propositions_membre li.propose_actif {
    background-color: var(--club-principale-claire, #eef0fc);
    color: var(--club-principale-fonce, #232c6b); }

/*  Les correspondances proposées quand la page se passe de script : la
    recherche a trouvé plusieurs personnes, et l'écran les nomme plutôt
    que d'en choisir une au hasard.                                        */
.candidats_membre ul {
  margin: 8px 0 0;
  padding-left: 20px; }
.candidats_membre li {
  margin-bottom: 4px; }

/* ---------------------------------------------------------------------- */
/*  10.7  Le piège à robots, et le titre d'un formulaire                  */
/* ---------------------------------------------------------------------- */
/*  LE PIÈGE À ROBOTS DOIT ÊTRE INVISIBLE.

    Le champ « Laissez ce champ vide » du formulaire d'inscription portait
    la classe « fieldset_hide », que cette feuille ne définit QUE sous
    « form fieldset » : le piège n'est ni l'un ni l'autre, la règle ne
    l'atteignait pas, et le dernier champ de l'inscription publique
    demandait donc en toutes lettres de ne rien y écrire.

    Il sort de l'écran plutôt que de disparaître : « display: none » et
    l'attribut « hidden » sont ignorés par les robots les plus simples,
    qui lisent le HTML et non le rendu — et un piège qu'ils ne remplissent
    pas ne prend personne.                                                 */
.piege_robot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden; }

/*  Le titre posé dans un formulaire. Le formulaire est une grille souple :
    sans largeur pleine, le titre devenait une case de la grille et le
    premier champ venait se ranger à côté de lui, collé et sur une autre
    ligne de base.                                                         */
.titre_formulaire {
  width: 100%;
  flex: 0 0 100%;
  margin: 0 0 22px; }

/* ---------------------------------------------------------------------- */
/*  10.8  La légende des barres de remplissage                            */
/* ---------------------------------------------------------------------- */
/*  Le trait sous chaque séance donne son remplissage par sa longueur, et
    change de couleur quand la séance est complète. Rien ne l'annonçait :
    « 18/18 » virait de teinte sans qu'un mot explique la couleur.         */
.legende_jauge {
  margin: 0 0 18px;
  color: var(--club-texte-doux, #6b6e7b); }

.jauge_temoin {
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  margin: 0 2px 3px 8px;
  vertical-align: middle;
  background-color: var(--club-principale, #39449f); }

.jauge_temoin_complet {
  background-color: var(--club-secondaire, #0a7d62); }

/* ---------------------------------------------------------------------- */
/*  10.9  Le résumé d'un membre, sous sa ligne                            */
/* ---------------------------------------------------------------------- */
/*  La carte portait le formulaire d'identité complet du membre — dix-huit
    champs par personne, cinquante fois par page. Elle porte maintenant ce
    qu'on veut savoir sans quitter la liste : le solde, l'affiliation, la
    dernière venue, le total réglé. Corriger se fait sur la fiche.        */
.resume_membre dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 14px; }
.resume_membre dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--club-texte-doux, #6b6e7b);
  margin: 0; }
.resume_membre dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--club-chiffres, ui-monospace, Consolas, monospace); }

/* ---------------------------------------------------------------------- */
/*  10.10  Une ligne qui se déplie le dit ; une ligne fixe aussi          */
/* ---------------------------------------------------------------------- */
/*  Les titres de ligne dépliants n'annonçaient rien : « Stage • Le
    02-09-2026 » se cliquait, ou pas, sans qu'aucune marque le dise. Le
    mot de l'action se pose à droite, et une ligne qui n'ouvre rien perd
    le curseur et la marque.                                              */
.marque_deplier {
  float: right;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--club-principale, #39449f); }

.btn_form.actif .marque_deplier::after {
  content: ' ▲'; }

.btn_form:not(.actif) .marque_deplier::after {
  content: ' ▼'; }

/*  Le script retire la classe des titres qui n'ont aucun panneau à
    ouvrir : ils gardent l'allure d'une ligne, sans la main du curseur.   */
.btn_form_inerte {
  cursor: default; }

.btn_form_inerte:hover, .btn_form_inerte:focus {
  border-color: var(--club-ligne, #e2e2e2); }

/*  Une ligne de liste qui n'est que de l'information : même dessin que
    les autres, sans rien qui invite à appuyer.                           */
.ligne_fixe {
  padding: 9px 16px;
  text-align: left;
  color: var(--club-texte, #161a2e);
  background-color: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-arrondi, 4px);
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 15px;
  margin: 0; }
  .ligne_fixe small {
    display: inline-block;
    font-size: 12.5px;
    color: var(--club-texte-doux, #787a86);
    font-style: normal; }

.ligne_fixe_note {
  margin: 4px 0 0;
  padding: 0 16px 8px;
  color: var(--club-texte-doux, #787a86); }

/* ---------------------------------------------------------------------- */
/*  10.11  Les aperçus du menu « Style » de l'éditeur                     */
/* ---------------------------------------------------------------------- */
/*  La bibliothèque montre chaque choix dans son propre habillage, en
    posant de VRAIS éléments de titre dans le document : un lecteur
    d'écran qui liste les titres de la page trouvait « Titre 2 »,
    « Titre 3 », « Titre 4 » et « Titre 5 » entre les sections réelles.

    Le script les remplace par des « span » qui portent leur ancien
    niveau en classe. Ces règles leur rendent l'allure d'un titre — c'est
    tout ce qu'on leur demande : ressembler, sans en être.               */
.apercu_titre {
  display: block;
  margin: 0;
  line-height: 1.25;
  font-family: var(--club-police-titres, var(--club-police));
  font-weight: 600; }

.apercu_titre_h1 {
  font-size: 26px; }

.apercu_titre_h2 {
  font-size: 22px; }

.apercu_titre_h3 {
  font-size: 19px; }

.apercu_titre_h4 {
  font-size: 17px; }

.apercu_titre_h5 {
  font-size: 15px; }

.apercu_titre_h6 {
  font-size: 13.5px; }

/* ---------------------------------------------------------------------- */
/*  10.12  Champs fichier en français                                     */
/* ---------------------------------------------------------------------- */
/*  « Choose File / No file chosen » est le texte du navigateur, dans SA
    langue. On masque la commande native et on pose les deux libellés
    français à sa place. Le champ reste atteignable au clavier : le
    bouton visuel est un label.                                           */
.champ_fichier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px; }

.champ_fichier input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

.champ_fichier .fichier_bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--club-ligne, #cfd3e0);
  border-radius: var(--club-bouton-arrondi, 8px);
  background: var(--club-fond, #fff);
  color: var(--club-encre, #1f1f1f);
  font-size: 14px;
  cursor: pointer; }

.champ_fichier input[type="file"]:focus + .fichier_bouton,
.champ_fichier input[type="file"]:focus-visible + .fichier_bouton {
  outline: 2px solid var(--club-principale, #2F3A8F);
  outline-offset: 2px; }

.champ_fichier .fichier_nom {
  font-size: 14px;
  color: var(--club-texte-doux, #5c6170); }

/*  Un logo dont le fichier manque ne doit pas s'effondrer à largeur 0 :
    le bloc garde une largeur minimale, le nom du club prend le relais
    dans le HTML.                                                         */
.logo_club img {
  min-width: 48px;
  height: auto; }

/* ======================================================================== */
/*  Correctifs UX — pied, cartes, barres de recherche                       */
/* ======================================================================== */
#page_accueil footer,
#page__en_construction footer {
  /* Voile sombre : le !important transparent d'avant annulait le
     dégradé plus bas, et le gris clair du pied se lisait 1,5:1
     sur le gi. 82 % de noir, encre blanche. Pages intérieures
     non concernées (sélecteur d'accueil seulement). */
  background: rgba(0, 0, 0, 0.82) !important;
  background-color: rgba(0, 0, 0, 0.82) !important; }

#page_accueil footer a,
#page_accueil footer p,
#page_accueil footer b,
#page_accueil footer span,
#page__en_construction footer a,
#page__en_construction footer p,
#page__en_construction footer b,
#page__en_construction footer span {
  color: #fff !important; }

body:not(#page_accueil):not(#page__en_construction) footer,
body:not(#page_accueil):not(#page__en_construction) footer p {
  text-align: center !important; }

/* Deux colonnes sur Mon compte : chaque carte à 50 %. */
#page_compte .cartes_donnees {
  grid-template-columns: repeat(2, minmax(0, 1fr)); }

#page_compte .carte_donnee {
  width: 100%;
  max-width: none;
  box-sizing: border-box; }

@media (max-width: 800px) {
  #page_compte .cartes_donnees {
    grid-template-columns: 1fr; } }
/* Champ date aligné sur le champ membre (même label, même hauteur). */
.champ_filtre {
  position: relative;
  flex: 1 1 0;
  min-width: 0; }
  .champ_filtre label {
    display: block;
    font-size: 12.5px;
    margin-bottom: 4px; }
  .champ_filtre input {
    width: 100%; }

#page_compte form.form_flex {
  width: 100%;
  max-width: none;
  align-items: flex-end;
  gap: 10px; }

#page_compte form.form_flex > input[type="text"],
#page_compte form.form_flex > input[type="search"],
#page_compte form.form_flex > select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none; }

#page_compte form.form_flex .recherche_membre {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none; }

#page_compte form.form_flex .recherche_membre input,
#page_compte form.form_flex.form_flex2 .recherche_membre input,
#page_compte form.form_flex .recherche_membre input.champ_recherche_membre {
  width: 100%;
  max-width: none;
  flex: none; }

#page_compte form.form_flex .champ_filtre {
  flex: 1 1 0;
  min-width: 0; }

#page_compte form.form_flex > button,
#page_compte form.form_flex > .btn {
  flex: 0 0 auto;
  align-self: flex-end;
  width: auto;
  min-width: 120px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 42px;
  box-sizing: border-box; }

/* Réservations : date et membre à parts égales, bouton collé à la fin. */
@media (min-width: 801px) {
  #page_compte form.form_recherche_seance {
    flex-wrap: nowrap; }

  #page_compte form.form_recherche_seance > .champ_filtre,
  #page_compte form.form_recherche_seance > .recherche_membre {
    flex: 1 1 0;
    max-width: none;
    width: auto; }

  #page_compte form.form_recherche_seance > button {
    flex: 0 0 auto;
    width: auto;
    max-width: none; } }
@media (max-width: 800px) {
  #page_compte form.form_flex > .champ_filtre,
  #page_compte form.form_flex > .recherche_membre,
  #page_compte form.form_flex > button,
  #page_compte form.form_flex > input[type="text"] {
    flex: 1 1 100%;
    max-width: none;
    width: 100%; }

  #page_compte form.form_flex > button {
    height: 42px;
    max-height: 42px;
    line-height: 42px; } }
/* ======================================================================== */
/*  Correctifs UX — accueil, public, espace club (suite)                    */
/* ======================================================================== */
/*  Complète le bloc « pied, cartes, barres de recherche ». Les règles
    conflictuelles (small en absolute, bouton à 100 % sous la date,
    padding-top 250 px) ont été défaites plus haut. Ici : le reste.      */
/* ---------------------------------------------------------------------- */
/*  Accueil : pile de connexion centrée, colonne adoucie, pied pleine
    largeur, nav régulière, mobile bord à bord.                           */
/* ---------------------------------------------------------------------- */
#page_accueil .container_home,
#page__en_construction .container_home {
  padding-top: 12px;
  align-items: center;
  justify-content: center; }
#page_accueil .home_texte,
#page__en_construction .home_texte {
  margin-top: 0; }

/*  La pile logo + formulaire + nav se centre dans la colonne, sans
    250 px de vide sous l'enseigne. Le pied quitte la colonne : il
    barre le bas de la vitre, sur la photo.                              */
@media (min-width: 851px) {
  #page_accueil,
  #page__en_construction {
    justify-content: flex-start;
    align-items: flex-end; }

  #page_accueil > header,
  #page__en_construction > header {
    flex: 0 0 auto;
    box-shadow: -18px 0 36px rgba(0, 0, 0, 0.16); }

  #page_accueil > main,
  #page__en_construction > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    box-shadow: -18px 0 36px rgba(0, 0, 0, 0.16); }

  #page_accueil .container_home,
  #page__en_construction .container_home {
    padding: 12px 20px 72px;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }

  /*  Un voile à gauche de la colonne, pour que la photo ne se coupe
      plus net.                                                         */
  #page_accueil > header,
  #page_accueil > main,
  #page__en_construction > header,
  #page__en_construction > main {
    position: relative; }
    #page_accueil > header::before,
    #page_accueil > main::before,
    #page__en_construction > header::before,
    #page__en_construction > main::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -48px;
      width: 48px;
      pointer-events: none;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55)); }

  #page_accueil > footer,
  #page__en_construction > footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    align-self: stretch;
    z-index: 20;
    padding: 14px 24px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.28)) !important;
    text-align: center;
    box-shadow: none;
    border: 0; }
    #page_accueil > footer a, #page_accueil > footer p,
    #page__en_construction > footer a,
    #page__en_construction > footer p {
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } }
/*  Découvrir / L'équipe / Horaires / Photos / Conditions : parts égales
    qui se replient en 3+2, plus en 4+1.                                  */
.acces_public {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2px 6px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto; }
  .acces_public a {
    flex: 1 1 30%;
    max-width: 48%;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 4px;
    font-size: 12.5px; }

/*  Mobile : la colonne blanche et le pied prennent toute la vitre.
    Plus de bandeau photo à gauche ni de bande sombre à droite.          */
@media (max-width: 850px) {
  #page_accueil,
  #page__en_construction {
    display: block; }

  #page_accueil > header,
  #page_accueil > main,
  #page_accueil > footer,
  #page__en_construction > header,
  #page__en_construction > main,
  #page__en_construction > footer,
  #page_accueil header,
  #page__en_construction header,
  #page_accueil .container_home,
  #page__en_construction .container_home {
    width: 100%;
    max-width: none;
    margin: 0;
    left: 0;
    right: 0; }

  #page_accueil .container_home,
  #page__en_construction .container_home {
    padding: 12px 16px 28px;
    align-items: center;
    min-height: 0; }
    #page_accueil .container_home::before,
    #page__en_construction .container_home::before {
      display: none; }

  #page_accueil > header::before,
  #page_accueil > main::before,
  #page__en_construction > header::before,
  #page__en_construction > main::before {
    display: none; }

  #page_accueil footer,
  #page__en_construction footer {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    background: rgba(0, 0, 0, 0.82) !important;
    background-color: rgba(0, 0, 0, 0.82) !important; }

  .acces_public {
    max-width: none; }
    .acces_public a {
      flex: 1 1 40%;
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      overflow-wrap: anywhere;
      font-size: 12.5px;
      line-height: 1.35; }

  /*  Les boutons « Découvrir le club » / « L'équipe encadrante »
      vivaient en calque par-dessus toute la vitre : sur un
      téléphone ils se posaient sur l'enseigne. Ils reprennent
      le flux, sous le logo, et se replient.                      */
  #page_accueil .home_texte,
  #page__en_construction .home_texte {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 8px 16px 12px;
    z-index: 1;
    pointer-events: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
    #page_accueil .home_texte .btn,
    #page__en_construction .home_texte .btn {
      font-size: 13px;
      padding: 8px 12px;
      margin: 4px;
      white-space: normal;
      max-width: 100%;
      overflow: visible; } }
/* ---------------------------------------------------------------------- */
/*  Pied du rail public : texte qui se replie, téléphone d'une pièce.     */
/* ---------------------------------------------------------------------- */
body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer {
  white-space: normal;
  padding: 10px 12px 12px;
  max-height: none;
  font-size: 11px; }
  body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer p, body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer a, body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer small, body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer .small {
    white-space: normal;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere; }
  body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer a[href^="tel:"] {
    white-space: nowrap;
    overflow-wrap: normal; }
  body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer .liens_legaux .separate {
    margin: 0 4px; }
  body:not(#page_accueil):not(#page__en_construction):not(.espace_club) footer .form_ligne {
    display: inline;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0; }

.form_ligne {
  display: inline;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto; }

.form_ligne button {
  width: auto;
  max-width: none; }

/* ---------------------------------------------------------------------- */
/*  Horaires & tarifs : 3 colonnes, cartes de même hauteur, CTA pleine
    largeur. Un jeudi orphelin reste à la largeur d'une carte.            */
/* ---------------------------------------------------------------------- */
#page_horairestarifs .grille {
  align-items: stretch; }
#page_horairestarifs .grille > .tuile,
#page_horairestarifs .grille > .jour_horaire {
  height: 100%;
  min-height: 0; }
#page_horairestarifs .grille_large {
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page_horairestarifs .grille_etroite {
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page_horairestarifs form fieldset,
#page_horairestarifs form fieldset.fieldset_full {
  width: 100%;
  max-width: none; }

@media (max-width: 1100px) {
  #page_horairestarifs .grille_large,
  #page_horairestarifs .grille_etroite {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  #page_horairestarifs .grille_large,
  #page_horairestarifs .grille_etroite {
    grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------- */
/*  Inscription : Valider sur toute la largeur, cases alignées.           */
/* ---------------------------------------------------------------------- */
#page_inscription form {
  max-width: 640px; }
  #page_inscription form > button.btn,
  #page_inscription form > button.btn_block {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    min-height: 42px; }
  #page_inscription form fieldset.fieldset_checkbox {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-left: 0; }
    #page_inscription form fieldset.fieldset_checkbox div {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding-left: 28px;
      white-space: normal;
      overflow: visible; }
    #page_inscription form fieldset.fieldset_checkbox label {
      display: block;
      width: 100%;
      max-width: 100%;
      text-align: left;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      overflow-wrap: anywhere;
      word-break: break-word; }

/* ---------------------------------------------------------------------- */
/*  Barres de recherche de l'espace club                                  */
/* ---------------------------------------------------------------------- */
#page_compte form {
  max-width: none; }

#page_compte form.form_flex {
  margin-bottom: 8px;
  align-items: flex-end;
  flex-wrap: nowrap; }
  #page_compte form.form_flex > input[type="text"],
  #page_compte form.form_flex > input[type="search"],
  #page_compte form.form_flex > input[type="email"],
  #page_compte form.form_flex > select,
  #page_compte form.form_flex .champ_filtre input,
  #page_compte form.form_flex .recherche_membre input[type="text"] {
    height: 42px;
    min-height: 42px;
    box-sizing: border-box; }

#page_compte form.form_flex > button,
#page_compte form.form_flex > .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  margin-left: 0; }

/*  L'aide est masquée (etiquette_masquee) : plus de recouvrement des
    filtres Actifs / Désactivés.                                          */
.recherche_membre > small.etiquette_masquee {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; }

@media (max-width: 800px) {
  #page_compte form.form_flex,
  #page_compte form.form_recherche_seance {
    flex-wrap: wrap; }

  #page_compte form.form_flex > .champ_filtre,
  #page_compte form.form_flex > .recherche_membre,
  #page_compte form.form_flex > input[type="text"],
  #page_compte form.form_flex > button,
  #page_compte form.form_flex > .btn {
    flex: 1 1 100%;
    width: 100%;
    max-width: none; }

  #page_compte form.form_flex > button,
  #page_compte form.form_flex > .btn {
    min-width: 0; } }
/* ---------------------------------------------------------------------- */
/*  Paiements : totaux qui respirent, liste plus dense, en-tête collant.  */
/* ---------------------------------------------------------------------- */
.totaux_mois {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 28px; }
  .totaux_mois li {
    gap: 12px;
    align-items: baseline; }
    .totaux_mois li span {
      flex: 0 0 auto; }
    .totaux_mois li b {
      flex: 1 1 auto;
      text-align: right;
      min-width: 0; }

#page_compte .list_form > .btn_form.ligne_paiement,
#page_compte .ligne_paiement {
  padding-top: 6px;
  padding-bottom: 6px; }

#page_compte .tableau_defilant thead th,
#page_compte .list_form thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--club-carte-fond, #fff); }

/* ---------------------------------------------------------------------- */
/*  E-shop : le formulaire n'hérite plus du flex 1024 px ; le panier
    s'aligne dans le flux, à droite du titre.                             */
/* ---------------------------------------------------------------------- */
.form_eshop {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  flex-wrap: nowrap; }

.eshop_entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative; }
  .eshop_entete > div:first-child {
    flex: 1 1 auto;
    min-width: 0; }

#page_compte #panier,
.eshop_page #panier {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  align-self: flex-start; }
  #page_compte #panier #btn_panier,
  .eshop_page #panier #btn_panier {
    position: relative;
    top: auto;
    right: auto; }

#page_compte .list_produits,
.form_eshop .list_produits {
  max-width: none;
  width: 100%; }

/* ---------------------------------------------------------------------- */
/*  Mon compte : affiliation sur sa ligne, aide du mot de passe dans
    la cellule.                                                           */
/* ---------------------------------------------------------------------- */
#page_compte form.modif {
  align-items: flex-start;
  max-width: none; }
  #page_compte form.modif fieldset.readonly.fieldset_full,
  #page_compte form.modif fieldset.fieldset_full {
    width: 100%; }
  #page_compte form.modif .aide_reglage {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--club-texte-doux, #6b6e7b); }

/* ---------------------------------------------------------------------- */
/*  Tableau de bord : libellés à deux lignes, chiffres calés en bas.      */
/* ---------------------------------------------------------------------- */
.chiffres_bord .chiffre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 100%; }
  .chiffres_bord .chiffre span {
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .chiffres_bord .chiffre b {
    margin-top: auto;
    padding-top: 4px; }

/* ---------------------------------------------------------------------- */
/*  Séance : action destructive, texte d'aide lisible.                    */
/* ---------------------------------------------------------------------- */
.btn_alerte,
button.btn_alerte {
  background-color: var(--club-alerte, #a32b2b);
  color: #fff;
  border-color: var(--club-alerte, #a32b2b); }
  .btn_alerte:hover, .btn_alerte:focus,
  button.btn_alerte:hover,
  button.btn_alerte:focus {
    background-color: var(--club-alerte, #a32b2b);
    color: #fff;
    filter: brightness(0.92); }

.aide_annulation,
.aide_annulation small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--club-texte, #161a2e);
  opacity: 0.85; }

/* ---------------------------------------------------------------------- */
/*  Mobile : onglets défilants, courriels qui se coupent proprement.      */
/* ---------------------------------------------------------------------- */
@media (max-width: 800px) {
  nav.onglets,
  .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
    nav.onglets .onglet, nav.onglets a,
    .onglets .onglet,
    .onglets a {
      flex-shrink: 0;
      text-overflow: unset;
      overflow: visible;
      white-space: nowrap; }

  .ligne_membre {
    flex-wrap: wrap; }
    .ligne_membre .compte_seances {
      flex-basis: 100%;
      white-space: normal; }
    .ligne_membre .compte_abo {
      max-width: 100%; }

  .joindre_membre a,
  .carte_inscrit .carte_tel a,
  .ligne_membre a[href^="mailto:"] {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word; } }
/* ---------------------------------------------------------------------- */
/*  Carte e-shop : image, description, prix visibles.                     */
/* ---------------------------------------------------------------------- */
/*  La carte était un carré en calque : titre en bandeau, photo en fond,
    prix dans un coin, bouton « Ajouter » à l'opacité nulle hors survol.
    Sans photo (dossier de démo vide à dessein) il ne restait qu'un
    rectangle blanc et un titre — plus le bouton, une fois le survol
    collé sur un écran tactile. Ça se lisait comme une carte cassée.

    Image, description et prix reprennent le flux. Le bouton reste
    visible. Le clic ouvre toujours la fiche.                             */
.list_produits li:after {
  content: none;
  display: none;
  padding-bottom: 0; }
.list_produits li a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: auto;
  top: auto;
  left: auto;
  width: 100%;
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: 0 0 16px;
  overflow: visible;
  background-color: var(--club-fond, #fff); }
  .list_produits li a h5 {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    background-color: var(--club-principale, #39449f);
    color: var(--club-bouton-texte, #fff); }
  .list_produits li a .img {
    position: relative;
    top: auto;
    left: auto;
    z-index: 0;
    width: 100%;
    height: 0;
    padding-bottom: 72%;
    margin: 0;
    background-color: var(--club-principale-claire, #eef0fc);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat; }
  .list_produits li a .desc {
    display: block;
    position: relative;
    z-index: 1;
    padding: 10px 14px 0;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    font-family: inherit;
    line-height: 1.45;
    text-align: left;
    color: var(--club-texte, #161a2e);
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    overflow-wrap: anywhere;
    max-height: 4.4em; }
  .list_produits li a .prix {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 8px 14px 2px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: var(--club-principale, #39449f);
    background-color: transparent;
    white-space: nowrap;
    overflow: visible; }
  .list_produits li a .btn_buy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    display: inline-block;
    align-self: center;
    margin: 10px auto 0;
    opacity: 1;
    transform: none;
    white-space: nowrap;
    overflow: visible; }
    .list_produits li a .btn_buy:after {
      display: none; }
  .list_produits li a:hover, .list_produits li a:focus {
    transform: none; }
    .list_produits li a:hover .btn_buy, .list_produits li a:focus .btn_buy {
      opacity: 1;
      transform: none; }

@media (max-width: 850px) {
  .list_produits li a {
    width: 100%;
    height: auto;
    top: auto;
    left: auto; } }
/* ---------------------------------------------------------------------- */
/*  Libellés : se replient, ne se coupent pas au bord du contenant.       */
/* ---------------------------------------------------------------------- */
/*  Même cause pour le bouton Menu, les cases d'inscription et le volet
    de réservation : overflow / white-space / text-overflow hérités, ou
    une largeur trop juste pour le chevron. Réserver (.action_reserver)
    reste visible.                                                        */
form fieldset.fieldset_checkbox {
  overflow: visible;
  max-width: 100%; }
  form fieldset.fieldset_checkbox div {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow: visible; }
  form fieldset.fieldset_checkbox label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word; }

.datepicker--day-name,
.datepicker--nav-title,
.datepicker--cell {
  white-space: normal;
  overflow: visible;
  text-overflow: unset; }

/* ======================================================================== */
/*  Audit dojodebattydo — CTA, mobile, pastille équipe                      */
/* ======================================================================== */
/* Deux CTA publics empilés dans un form flex se chevauchaient (fieldset
   en item flex, largeur 100 %, pas d'écart). Côte à côte dès qu'il y a
   la place, empilés avec un trou sur téléphone. */
/* Le bloc n'est plus un <form> : deux liens ne se remplissent pas. Les
   sélecteurs suivent l'élément qui les porte désormais, et gardent la
   forme « form.cta_paire » pour ne rien casser si un gabarit ancien
   traîne encore. */
.cta_paire, form.cta_paire {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 100%; }
  .cta_paire > .cta_choix,
  form.cta_paire fieldset,
  form.cta_paire fieldset.fieldset_full {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    position: relative;
    float: none; }
  .cta_paire a.btn, form.cta_paire a.btn {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    margin: 0; }

@media (max-width: 600px) {
  .cta_paire > .cta_choix,
  form.cta_paire fieldset,
  form.cta_paire fieldset.fieldset_full {
    flex: 1 1 100%;
    width: 100%; } }
/* Pastille de rôle sur L'équipe : accent du club, pas le vert pastel. */
.fiche_equipe .fiche_role,
.fiche_equipe span.puce.fiche_role {
  --puce-fond: var(--club-principale-vive, #E6101D);
  --puce-encre: #fff;
  --puce-trait: var(--club-principale-fonce, #B50C16);
  background-color: var(--club-principale-vive, #E6101D);
  color: #fff;
  border-color: var(--club-principale-fonce, #B50C16); }

/* Réserver reste tappable hors hamburger, y compris à 375 px. */
@media (max-width: 1000px) {
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .action_reserver,
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver,
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien {
    display: inline-flex !important;
    visibility: visible;
    opacity: 1;
    position: relative;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    z-index: 5; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver_lien,
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_reserver {
    white-space: nowrap;
    padding: 8px 12px; }
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > button.menu_mobile {
    flex: 0 0 auto;
    min-width: 44px; }

  .barre_haute.menu_ouvert .menu_barre {
    display: block;
    max-height: none;
    overflow: visible; } }
@media (max-width: 420px) {
  body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute {
    flex-wrap: wrap; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > div:first-child {
      max-width: 50%; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .action_reserver {
      order: 2; }
    body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > button.menu_mobile {
      order: 3;
      margin-left: auto; } }
/* Accueil mobile : colonne de connexion utilisable, pas de débordement. */
@media (max-width: 850px) {
  #page_accueil,
  #page__en_construction {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%; }

  #page_accueil .container_home,
  #page__en_construction .container_home {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 16px 16px 28px;
    box-sizing: border-box;
    align-items: center; }

  #page_accueil .container_home form,
  #page__en_construction .container_home form,
  #page_inscription form,
  #page_horairestarifs form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; }

  #page_accueil .container_home input,
  #page_accueil .container_home button,
  #page_inscription input,
  #page_inscription select,
  #page_inscription button,
  .datepicker-container,
  .datepickers-container {
    max-width: 100%;
    box-sizing: border-box; }

  header.left_header .menu_mobile {
    display: block;
    pointer-events: auto; }

  header.left_header.menu_ouvert .menu_colonne,
  header.left_header.menu_ouvert .menu_barre {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible; } }

#page_accueil .container_home {
  background: #fff;
  background-color: #fff;
}

/* Accueil desktop + mobile carte unique */
#page_accueil header,
#page_accueil > header {
  background: var(--club-menu, #fff) !important;
  background-color: var(--club-menu, #fff) !important;
  box-shadow: none !important;
  border: none !important;
  border-right: none !important;
}
#page_accueil > header::before { display: none; }
#page_accueil footer,
#page_accueil > footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-right: none !important;
  color: var(--club-fond, #ffffff);
}
@media (min-width: 851px) {
  #page_accueil .home_texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding-left: 100px;
    padding-right: 40px;
    box-sizing: border-box;
  }
  #page_accueil .home_texte .home_verticalalign {
    width: auto;
    max-width: 100%;
    text-align: left;
  }
  #page_accueil footer,
  #page_accueil > footer {
    position: fixed;
    left: 0;
    right: auto;
    bottom: 0;
    width: calc(100% - 500px);
    max-width: none;
    align-self: auto;
    z-index: 10;
    padding-left: 100px;
    padding-right: 40px;
    box-sizing: border-box;
    text-align: left !important;
  }
  #page_accueil footer a, #page_accueil footer p,
  #page_accueil > footer a, #page_accueil > footer p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  #page_accueil footer p,
  #page_accueil footer .center { text-align: left !important; }
}
@media (min-width: 851px) and (max-width: 1280px) {
  #page_accueil footer, #page_accueil > footer { width: calc(100% - 350px); }
}
@media (min-width: 851px) and (max-width: 1080px) {
  #page_accueil .home_texte { padding-left: 25px; }
  #page_accueil footer, #page_accueil > footer { padding-left: 25px; }
}
@media (max-width: 850px) {
  #page_accueil {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 20px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #page_accueil .home_texte { display: none !important; }
  #page_accueil header .menu_mobile,
  #page_accueil header nav { display: none !important; }
  #page_accueil > header,
  #page_accueil > main {
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    box-shadow: none !important;
  }
  #page_accueil > header {
    padding: 18px 20px 0;
    border-radius: 12px 12px 0 0;
    overflow: visible;
  }
  #page_accueil header .logo_club {
    width: 84px !important;
    height: auto !important;
    margin: 0 auto !important;
    float: none !important;
  }
  #page_accueil header .logo_club img {
    width: 84px !important;
    max-width: 84px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
  #page_accueil > main {
    padding: 0;
    border-radius: 0 0 12px 12px;
  }
  #page_accueil .container_home {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 16px 12px !important;
    background: #fff !important;
    background-color: #fff !important;
    align-items: stretch;
  }
  #page_accueil #form_connexion,
  #page_accueil .form_background {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 4px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #page_accueil .acces_public {
    width: 100%;
    max-width: none;
    margin: 0 auto 4px;
  }
  #page_accueil footer,
  #page_accueil > footer {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 14px auto 0 !important;
    padding: 0 4px !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    text-align: center !important;
    opacity: 1 !important;
  }
  #page_accueil footer p,
  #page_accueil footer .center { text-align: center !important; }
}

/*# sourceMappingURL=style.css.map */

/*  La famille sur la ligne d'un membre : « enfant de … », « enfants :
    … ». Elle vient après le téléphone et le courriel, dans la même
    petite fonte, et se sépare d'eux par un point médian plutôt que par
    une virgule — on ne confond pas la liste des enfants avec la suite
    des coordonnées.                                                    */
.ligne_membre .lien_famille {
  display: inline-block;
  margin-right: 12px;
  color: var(--club-texte-doux, #787a86); }
  .ligne_membre .lien_famille::before {
    content: "·";
    margin-right: 8px;
    color: var(--club-ligne, #e2e2e2); }
  .ligne_membre .lien_famille a {
    color: var(--club-texte-doux, #787a86);
    text-decoration: none; }
    .ligne_membre .lien_famille a:hover,
    .ligne_membre .lien_famille a:focus {
      color: var(--club-principale, #39449f);
      text-decoration: underline; }

/*  Les deux boutons d'une ligne de famille, côte à côte : sans cela
    « .btn » les met en bloc, l'un sous l'autre, et la ligne du tableau
    double de hauteur pour deux mots.                                   */
.actions_famille {
  white-space: nowrap; }
  .actions_famille .btn {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin: 0 4px 0 0; }


/* ======================================================================
   LES PANNEAUX : UNE PARTIE D'ÉCRAN, UNE CARTE
   ======================================================================

   La fiche d'un membre porte neuf sujets — qui est cette personne, ce
   qu'elle a suivi, ce qu'elle a payé, ce que le club lui a offert, son
   abonnement, son mot de passe, le suivi, son parcours, son journal.
   Ils étaient alignés dans UNE carte de quatre mille pixels de haut,
   séparés par des jalons de douze pixels et demi. Rien ne disait où
   une partie finissait : le formulaire d'encaissement se lisait comme
   la suite du tableau des règlements, et la question que le club pose
   devant cet écran — « ce paiement est-il enregistré ? » — se
   cherchait à la molette.

   Une partie devient une carte. Le gabarit en dessine déjà une pour
   « section », et l'écran d'administration s'en sert depuis toujours :
   ce bloc n'écrit que la tête de la carte, l'air qui la sépare de la
   suivante, et la place qu'une ancre doit garder sous la barre haute.
   ====================================================================== */
.panneau {
  margin-bottom: 18px;
  /* Sans cette réserve, l'ancre range le titre du panneau visé
     DERRIÈRE la barre haute : on croit avoir sauté trop loin, et
     l'on remonte à la main. */
  scroll-margin-top: 92px; }

/*  Un panneau qui n'est que son formulaire : la tête devient alors un
    enfant du formulaire, donc un élément de sa grille. Sans cette
    ligne, elle prend la moitié de la largeur et le premier champ monte
    se ranger à côté du titre.                                          */
form > .panneau_entete {
  width: 100%; }

.panneau_entete {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--club-ligne, #e2e2e2); }
  .panneau_entete::after {
    /*  Le repère du club posé sur le trait, comme sous le titre
        d'un écran : quarante-quatre pixels de la couleur choisie.
        C'est lui qui fait lire la ligne comme un début de partie,
        et non comme un filet de séparation.                      */
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    background-color: var(--club-principale, #39449f); }

/*  Le titre et son repère tiennent une ligne à eux. L'intro, posée
    dans le même conteneur souple, se rangeait à droite du titre dès
    qu'elle y trouvait la place — la mesure de lecture d'un paragraphe
    étant bornée à six cent quatre-vingts pixels, elle en trouvait
    presque toujours — et l'explication d'une partie se lisait alors
    comme la légende de son titre.                                      */
.panneau_ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px; }

/*  Ni casse ni graisse ici : les titres suivent ce que le club a réglé,
    et la règle qui le pose vient plus haut avec un poids que celle-ci
    n'aurait pas à défaire.                                             */
.panneau_titre {
  margin: 0;
  text-align: left;
  letter-spacing: 0.01em;
  font-size: 17px;
  line-height: 1.3; }

/*  L'état de la partie, à droite de son titre : « 3 impayés, 105,00 € »,
    « en ordre jusqu'au 12-03-2027 ». Ce qu'on veut savoir sans lire la
    carte.                                                              */
.panneau_repere {
  margin: 0 0 0 auto;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  color: var(--club-texte-doux, #787a86); }

/*  À quoi la partie sert, en une phrase. Elle passe sous le titre,
    toute la largeur : une explication qui partage la ligne avec un
    total ne se lit ni comme l'un ni comme l'autre.                     */
.panneau_intro {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  color: var(--club-texte-doux, #787a86); }

/*  Le premier jalon d'un panneau ne retombe pas de trente pixels : la
    tête vient de laisser son air.                                      */
.panneau > .panneau_entete + h4,
.panneau > .panneau_entete + h5 {
  margin-top: 0; }

/*  Le sommaire d'un écran à panneaux : les pastilles de celui de
    l'administration, posées au-dessus du premier panneau.              */
.sommaire_panneaux {
  margin-bottom: 16px; }

/*  UNE SOUS-PARTIE DANS UN PANNEAU.

    Un geste se range sous ce qu'il change : « Enregistrer un paiement
    reçu au club » vit sous les paiements du membre, et non comme une
    dixième carte de la page. Le fond de page sous une carte blanche
    suffit à le détacher — une seconde carte blanche sur la première ne
    se verrait pas.                                                     */
.sous_bloc {
  margin-top: 22px;
  padding: 16px 18px;
  background-color: var(--club-surface-page, #f2f2f2);
  border: 1px solid var(--club-ligne, #e2e2e2);
  border-radius: var(--club-carte-arrondi, 10px); }
  .sous_bloc > h4:first-child, .sous_bloc > h5:first-child {
    margin-top: 0; }
  .sous_bloc > form {
    max-width: none; }

/*  LES BLOCS D'UNE FICHE, DANS UN PANNEAU BLANC.

    Ils étaient peints en blanc aux cinquante-cinq centièmes. Posés sur
    une carte déjà blanche, ils ne se voyaient pas : « Identité »,
    « Personne à prévenir » et « Famille » se lisaient comme trois
    paragraphes qui se suivent. Ils prennent le fond de page et son
    trait, et redeviennent ce qu'ils sont — trois sous-parties.         */
.bloc_fiche {
  background-color: var(--club-surface-page, #f2f2f2);
  border: 1px solid var(--club-ligne, #e2e2e2); }

/*  Les notes de l'encadrement ne sont pas montrées au membre, et la
    fiche le dit en toutes lettres. Le bloc le dit aussi, du ton dont
    le produit signale ce à quoi il faut faire attention.               */
.notes_internes {
  background-color: var(--club-attention-fond, #fbf1df);
  border-color: var(--club-attention-trait, #ebd8b0); }

/*  LES FORMULAIRES DANS UN PANNEAU.

    Le gabarit range les enfants d'un formulaire en grille souple : ce
    qui n'est pas un champ y devient une case, à côté du premier champ.
    « Enregistrer mes tarifs » tombait ainsi au milieu de la phrase qui
    le précède, et les deux paragraphes d'« Abonnements » se lisaient
    côte à côte comme deux colonnes.

    Ce qui explique ou ce qui titre prend la ligne entière. Les blocs
    marqués « btn » sont exclus : ce sont des boutons, et un bouton
    prend la largeur de son intitulé.                                   */
.panneau form > p:not(.btn),
.panneau form > h4,
.panneau form > h5,
.panneau form > .tableau_defilant,
.panneau form > .vide,
.panneau form > .encart {
  width: 100%; }

/*  La note d'un champ appartient au champ du dessus. Sans cet écart,
    elle touchait l'intitulé de la ligne suivante, et l'on ne savait
    plus lequel des deux elle expliquait : « Lettres sans accent,
    chiffres et tirets bas » se lisait sous « Séances créditées ».      */
.panneau form > fieldset > small {
  display: block;
  margin-bottom: 12px;
  line-height: 1.45; }

/*  LA CORRECTION D'UN ABONNEMENT, DÉPLIÉE SOUS SA LIGNE.

    Les petits formulaires logés dans une cellule de tableau — un
    intitulé « Motif » au-dessus d'un champ, puis « Constater » —
    s'empilent en colonne sur deux cent quatre-vingts pixels, et c'est
    ce qu'il leur faut dans une colonne étroite. Celui-ci en porte
    quatre et occupe une ligne entière du tableau : empilé, il faisait
    six cents pixels de haut pour quatre dates.

    L'identifiant est repris de la règle qu'on affine ici : sans lui,
    elle l'emporterait, un identifiant pesant plus que n'importe quel
    nombre de classes.                                                  */
#page_compte .table_seance td form.form_correction {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 16px;
  max-width: none; }
  #page_compte .table_seance td form.form_correction > fieldset {
    width: auto;
    flex: 1 1 150px;
    padding: 0; }
  #page_compte .table_seance td form.form_correction > .btn {
    margin-bottom: 15px; }


/* ======================================================================== */
/*                       Le tutoriel, dans le produit                       */
/* ======================================================================== */
/*  Le tutoriel tenait douze chapitres à plat dans sa colonne de gauche,
    et sa colonne de droite n'avait qu'un titre, des paragraphes et des
    tableaux. Il en tient vingt-deux, rangés en six familles, et ses
    chapitres alignent maintenant des étapes numérotées, des mises en
    garde encadrées et un fil de lecture.

    Cinq classes le portent. Elles ne servent qu'ici, et sont écrites
    ici plutôt que dans la partie du gabarit : ce sont des éléments de
    document, pas des éléments d'application.                            */
/*  Le titre d'une famille, dans la colonne du sommaire. Il ne se clique
    pas : c'est un intertitre, et il doit se lire comme tel — plus petit
    que les entrées qu'il coiffe, et de la couleur des choses qui ne
    mènent nulle part.                                                   */
.sommaire_famille {
  margin: 14px 6px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--club-texte-doux, #787a86); }
  /* La première famille touche le titre du sommaire : elle n'a pas
     besoin de l'écart qui sépare les suivantes. */
  .sommaire_famille:first-of-type {
    margin-top: 2px; }

/*  La phrase qui suit le titre d'un chapitre, et dit ce à quoi il
    répond. Un sommaire de vingt-deux entrées ne dit pas assez de
    chacune pour qu'on sache s'il faut l'ouvrir ; celle-ci le dit une
    fois le chapitre ouvert, et se lit avant le premier paragraphe.      */
.chapitre_chapo {
  max-width: 75ch;
  margin: -6px 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--club-texte-doux, #787a86); }

/*  Les étapes d'une marche à suivre. Une liste ordonnée ordinaire pose
    ses numéros dans la gouttière, où ils se perdent ; ici le numéro est
    une pastille de la couleur du club, à hauteur de la première ligne,
    parce que l'ordre EST l'information : mettre le club en route
    demande de faire ces choses dans cet ordre-là.                       */
.etapes {
  counter-reset: etape;
  list-style: none;
  max-width: 75ch;
  margin: 0 0 12px;
  padding: 0; }

.etape {
  counter-increment: etape;
  position: relative;
  margin: 0 0 14px;
  padding-left: 38px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
  display: block; }
  /* La liste est remise à zéro par le gabarit : sans cette règle, la
     pastille se dessinait et le marqueur d'origine avec elle. */
  .etape::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--club-principale, #39449f);
    color: #fff;
    font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    text-align: center; }
  .etape::marker {
    content: none; }
  .etape b {
    color: var(--club-encre, #1b1b1b); }

/*  Ce sur quoi le tutoriel veut qu'on s'arrête : une règle qui surprend,
    un piège, une obligation. Le ton dit lequel des deux — l'encadré
    neutre informe, l'encadré d'attention prévient — et reprend les
    couleurs d'état du produit, pour qu'une mise en garde ait ici la
    teinte qu'elle a partout ailleurs.                                   */
.note_aide {
  max-width: 75ch;
  margin: 0 0 14px;
  padding: 12px 16px;
  background-color: var(--club-info-fond, #e8f1f9);
  border: 1px solid var(--club-info-trait, #c6dcee);
  border-left-width: 3px;
  border-radius: var(--club-arrondi, 4px); }
  .note_aide p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    text-align: left; }
  .note_aide p + p {
    margin-top: 8px; }
  .note_aide b {
    color: var(--club-encre, #1b1b1b); }

.note_attention {
  background-color: var(--club-attention-fond, #fbf1df);
  border-color: var(--club-attention-trait, #ebd8b0); }

/*  Le sujet d'un groupe de lignes, dans le tableau « Où se règle quoi ».
    Quarante-trois lignes à plat ne se lisent plus, elles se parcourent :
    ces intertitres sont ce qui permet de sauter au bon tiers du tableau.
    C'est une ligne d'en-tête et non une ligne de données : elle prend le
    fond de page, et son texte la couleur du club.                       */
.tableau_admin tr.ligne_sujet th {
  padding-top: 16px;
  background-color: var(--club-surface-page, #f7f7f8);
  font-size: 11.5px;
  color: var(--club-principale, #39449f); }

.tableau_admin tr.ligne_sujet:first-child th {
  padding-top: 8px; }

/*  Le fil de lecture, au bas d'un chapitre. Un tutoriel se lit aussi de
    bout en bout, et remonter au sommaire entre deux chapitres est un
    geste de plus à chaque fois — d'autant que sous mille pixels, le
    sommaire est au-dessus du chapitre qu'on vient de lire.

    Deux cartes, l'une à gauche l'autre à droite. Le premier chapitre
    n'a pas de précédent : un span vide tient sa place, pour que le
    suivant reste à droite.                                              */
.fil_chapitres {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--club-ligne, #e2e2e2); }
  .fil_chapitres a {
    display: block;
    flex: 0 1 auto;
    max-width: 48%;
    padding: 10px 14px;
    background-color: var(--club-fond, #fff);
    border: 1px solid var(--club-ligne, #e2e2e2);
    border-radius: var(--club-arrondi, 4px);
    text-decoration: none; }
    .fil_chapitres a:hover, .fil_chapitres a:focus {
      border-color: var(--club-principale, #39449f); }
  .fil_chapitres .fil_suivant {
    text-align: right;
    margin-left: auto; }
  .fil_chapitres .fil_sens {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--club-texte-doux, #787a86); }
  .fil_chapitres .fil_titre {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--club-encre, #1b1b1b); }

/*  L'entrée de menu qui mène à un écran, sur sa fiche. Le guide disait
    ce qu'un écran fait sans dire où il se trouve ; c'est pourtant la
    moitié de la question, et neuf écrans sur quarante s'atteignent par
    un ONGLET d'une autre entrée. La ligne se lit en chasse fixe : c'est
    un chemin, comme un fil d'Ariane.                                    */
.fiche_ecran .fiche_ecran_ou {
  margin: 0 0 6px;
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: left;
  color: var(--club-texte-doux, #787a86); }

/*  Le titre d'une fiche mène à l'écran qu'elle décrit — sauf pour les
    quatre qu'un autre écran ouvre, qui restent du texte. Il garde la
    couleur des liens du club : la carte porte déjà un trait de cette
    couleur, et le titre s'y accorde. Le soulignement au survol dit
    qu'il se clique, sans le dire trente fois au repos.                  */
.fiche_ecran h5 a {
  text-decoration: none; }
  .fiche_ecran h5 a:hover, .fiche_ecran h5 a:focus {
    text-decoration: underline; }

@media (max-width: 700px) {
  /* Deux cartes de fil côte à côte sur trois cent vingt pixels ne
     laissent que deux mots à chacune. Elles se suivent. */
  .fil_chapitres {
    flex-direction: column; }
    .fil_chapitres a {
      max-width: none; }
    .fil_chapitres .fil_suivant {
      text-align: left;
      margin-left: 0; }
  .etape {
    padding-left: 32px; } }
/*  Deux paragraphes du tutoriel se touchaient. La feuille bornait leur
    largeur à soixante-quinze signes sans jamais leur donner d'écart, et
    la remise à zéro du gabarit s'appliquait : « Rien n'est irréversible
    dans cette liste » se lisait comme la suite de la phrase d'avant.
    Vingt-deux chapitres de prose l'ont rendu impossible à ignorer.      */
.section_admin p.full {
  margin-bottom: 12px; }
  .section_admin p.full:last-child {
    margin-bottom: 0; }

/*  La mention qui suit une destination que le lecteur ne peut pas ouvrir
    — « réglé par qui héberge le logiciel ». Elle se collait au nom
    qu'elle commente : on lisait « Identité du clubréglé par qui héberge
    le logiciel ». Dans une phrase elle prend l'écart d'un mot ; dans une
    cellule de tableau, où la place manque et où elle se répète quinze
    fois, elle prend sa ligne.                                           */
.colonne_detail p .compte, .colonne_detail li .compte {
  margin-left: 6px; }

.tableau_admin td .compte {
  display: block;
  margin-top: 3px; }


/* ------------------------------------------------------------
   Jauge de robustesse du mot de passe
   ------------------------------------------------------------
   Elle n'interdit rien : le serveur exige douze caractères, et
   c'est la seule règle. La jauge dit ce que vaut ce qu'on tape,
   au moment où on le tape. Les couleurs reprennent celles que le
   produit emploie déjà pour l'alerte, l'attention et la réussite :
   une échelle de plus n'apprendrait rien à personne. */
.robustesse {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

/* display:flex l'emporte sur le display:none que le navigateur donne
   à [hidden] : sans cette ligne, vider le champ laissait la jauge
   affichée, figée sur son dernier verdict. */
.robustesse[hidden] { display: none; }

.robustesse_barre {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--club-texte-doux, #8a8a8a);
	transition: width .2s ease, background-color .2s ease;
}

/* La piste : la barre exprime une proportion, il lui faut donc un
   cadre dont elle est la fraction. Sans elle, « 100 % » ne voulait
   rien dire de plus que « 40 % ». */
.robustesse_piste {
	display: block;
	flex: 0 0 140px;
	width: 140px;
	height: 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .10);
	overflow: hidden;
}

.robustesse_faible  { background: var(--club-alerte, #c0392b); }
.robustesse_moyenne { background: var(--club-attention, #d68910); }
.robustesse_bonne   { background: var(--club-succes, #1e8449); }
.robustesse_forte   { background: var(--club-succes, #1e8449); }

.robustesse_texte {
	font-size: .85em;
	color: var(--club-texte-doux, #6b6b6b);
}

/* Le mouvement est un confort : qui le refuse garde la couleur et la
   largeur, sans transition. */
@media (prefers-reduced-motion: reduce) {
	.robustesse_barre { transition: none; }
}

/* ------------------------------------------------------------
   « Compléter mon dossier »
   ------------------------------------------------------------
   La carte du premier écran du membre. Elle ne paraît que s'il reste
   quelque chose à faire, et disparaît une fois le dossier complet :
   c'est pour cela qu'aucun état « tout est fait » n'est dessiné ici. */
.dossier_a_completer {
	border: 1px solid var(--club-carte-trait, rgba(0, 0, 0, .12));
	border-radius: var(--club-carte-arrondi, 10px);
	background: var(--club-carte-fond, #fff);
	padding: 20px;
	margin-bottom: 25px;
}

.dossier_avancement_texte {
	text-align: center;
	color: var(--club-texte-doux, #6b6b6b);
	font-size: .9em;
	margin-bottom: 10px;
}

.dossier_avancement {
	height: 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .10);
	overflow: hidden;
	margin-bottom: 18px;
}

.dossier_avancement_barre {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--club-principale, #39449F);
	transition: width .3s ease;
}

.dossier_etapes { list-style: none; margin: 0; padding: 0; }

.dossier_etapes li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid rgba(0, 0, 0, .07);
}
.dossier_etapes li:first-child { border-top: 0; }

/* La puce dit l'état par une forme ET une couleur : la couleur seule
   ne se lit pas pour tout le monde. */
.dossier_puce {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8em;
	line-height: 1;
	margin-top: 2px;
}
.dossier_fait  .dossier_puce { background: var(--club-succes, #1e8449); color: #fff; }
.dossier_reste .dossier_puce { background: transparent; border: 2px dashed var(--club-texte-doux, #9a9a9a); }

.dossier_intitule { display: block; }
.dossier_intitule small { display: block; color: var(--club-texte-doux, #6b6b6b); margin-top: 2px; }
.dossier_intitule a { display: inline-block; margin-top: 6px; font-weight: 600; }

/* Ce qui est fait s'efface : la carte sert à montrer ce qui reste. */
.dossier_fait .dossier_intitule b     { font-weight: 500; color: var(--club-texte-doux, #6b6b6b); }
.dossier_fait .dossier_ok             { color: var(--club-succes, #1e8449); }

@media (prefers-reduced-motion: reduce) {
	.dossier_avancement_barre { transition: none; }
}

@media (max-width: 600px) {
	.dossier_a_completer { padding: 15px; }
}

/* ======================================================================== */
/*  LES PETITS RONDS « i »                bulle(), src/domaine/composants.php
	------------------------------------------------------------------------
	Un rond de la taille d'un mot, posé contre un intitulé, qui ouvre une
	phrase d'explication. Trois contraintes ont dessiné ce qui suit.

	IL S'OUVRE AU DOIGT. Le club travaille au bord du tatami, sur un
	téléphone : un panneau qui ne s'ouvre qu'au survol ne s'ouvre jamais.
	C'est donc un <details>, que le navigateur ouvre au doigt comme au
	clavier, sans une ligne de script.

	IL NE POUSSE RIEN. Le panneau est hors du flux : ouvrir une bulle ne
	déplace pas la ligne qu'on était en train de lire, et la refermer ne
	fait pas sauter l'écran.

	IL NE SORT PAS DE LA PAGE. Un panneau centré sous un rond posé dans la
	dernière colonne d'un tableau déborderait par la droite, et la page
	entière se mettrait à défiler de travers. Deux garde-fous : dans une
	dernière cellule, le panneau se cale sur la droite du rond ; sous 900
	pixels, il se pose en bas de l'écran, sur toute la largeur.             */
.bulle {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	/* Le rond se pose dans des titres, des étiquettes et des cellules.
	   Sans cette remise à zéro il hériterait leur graisse, leur casse et
	   leur taille : le même « i » se lirait deux fois plus gros dans un
	   titre que dans un tableau, et en capitales dans un en-tête. */
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1;
}

.bulle_rond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	/* Le rond emprunte la couleur du texte qu'il accompagne, en plus
	   pâle : il se pose aussi bien sur les écrans clairs du membre que
	   sur les fonds sombres de la gérance, sans deux jeux de règles. */
	opacity: .55;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	/* Le triangle que le navigateur dessine devant un <summary> n'a rien
	   à faire dans un rond de dix-neuf pixels. Les trois écritures se
	   complètent : « list-style » pour les navigateurs d'aujourd'hui,
	   « ::marker » pour ceux qui le placent là, « details-marker » pour
	   les Safari qui ne connaissent que celui-là. */
	list-style: none;
}
.bulle_rond::-webkit-details-marker { display: none; }
.bulle_rond::marker { content: ""; }

.bulle_rond:hover { opacity: 1; }

/* Ouverte, la bulle se voit : sans cela, on ne sait plus lequel des
   quinze ronds de l'écran a ouvert le panneau qu'on est en train de
   lire. */
.bulle[open] > .bulle_rond {
	opacity: 1;
	background: var(--club-principale, #39449f);
	border-color: var(--club-principale, #39449f);
	color: #fff;
}

/* La cible tactile fait trente et un pixels, le rond dix-neuf : un
   doigt ne vise pas au pixel près, et grossir le rond l'aurait rendu
   bavard au milieu d'un intitulé. Le débord reste sous la marge de
   gauche, pour ne pas recouvrir l'étiquette voisine et lui voler ses
   clics. */
.bulle_rond::after {
	content: "";
	position: absolute;
	top: -6px;
	right: -6px;
	bottom: -6px;
	left: -6px;
}

.bulle_texte {
	position: absolute;
	z-index: 900;
	top: calc(100% + 9px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: -webkit-max-content;
	width: max-content;
	max-width: min(300px, 78vw);
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--club-encre, #1f1f1f);
	/*  POURQUOI UN « !important » ICI, ET NULLE PART AILLEURS.

		L'espace du club impose « color: inherit » à tout p, li, td, th,
		span, label, dt et dd de ses sections, sous un sélecteur qui porte
		deux identifiants dans des :not(). Aucune classe ne passe devant.
		Le panneau, qui est un span, héritait donc de l'encre de la page :
		du gris très foncé sur un fond gris très foncé — mesuré à
		rgb(20,20,20) sur rgb(31,31,31), soit un texte illisible.

		Un panneau sombre a besoin d'un texte clair, où qu'il s'ouvre. */
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7);
}

.bulle_texte b {
	display: block;
	margin-bottom: 3px;
	color: #fff;
}

/*  Premier garde-fou : LE ROND QUI TERMINE UNE LIGNE.

	Deux cas, et le même remède. Dans la dernière cellule d'un tableau, et
	au bout d'un titre de section — où le titre prend toute la place et
	pousse le rond contre le bord droit —, un panneau centré sous le rond
	sortait de la page : mesuré, il en dépassait de cinquante-neuf pixels
	sur la page des tarifs, et la page entière se mettait à défiler de
	travers. Le panneau s'y aligne donc par la droite et s'étend vers la
	gauche, là où il y a toute la place.

	Ce n'est pas une rustine posée sur une page : c'est la position que la
	mise en page leur donne. Un rond qui suit un titre étiré est TOUJOURS
	au bord droit.                                                       */
td:last-child .bulle_texte,
th:last-child .bulle_texte,
.titre_bulle_filet > .bulle > .bulle_texte {
	left: auto;
	right: 0;
	-webkit-transform: none;
	transform: none;
}

/*  Second garde-fou : LE PANNEAU DÉTACHÉ.

	Un tableau large défile dans sa propre boîte (.tableau_defilant,
	overflow-x: auto). Une boîte qui défile rogne ce qui en sort — y
	compris vers le haut et le bas : un panneau posé sous l'en-tête d'une
	colonne y disparaissait purement et simplement, et l'on cliquait sur
	un rond qui ne montrait rien.

	Là, et sur tout écran étroit, le panneau quitte le flux de la page
	pour se poser en bas de la fenêtre : rien ne le rogne, rien ne le
	pousse hors de l'écran, et il s'ouvre là où le pouce se trouve déjà.
	Le rond qui l'a ouvert reste coloré : on sait de quoi il parle.      */
.tableau_defilant .bulle_texte {
	position: fixed;
	top: auto;
	right: 12px;
	bottom: 12px;
	left: 12px;
	-webkit-transform: none;
	transform: none;
	width: auto;
	max-width: none;
	z-index: 9999;
	padding: 14px 16px;
	font-size: 15px;
}

@media (max-width: 900px) {
	/* Sur un téléphone, aucune place sous le rond ne tient un panneau de
	   trois cents pixels sans sortir d'un côté ou de l'autre. */
	.bulle_texte,
	td:last-child .bulle_texte,
	th:last-child .bulle_texte {
		position: fixed;
		top: auto;
		right: 12px;
		bottom: 12px;
		left: 12px;
		-webkit-transform: none;
		transform: none;
		width: auto;
		max-width: none;
		z-index: 9999;
		padding: 14px 16px;
		font-size: 15px;
	}
}

/*  UN TITRE ET SON ROND.
	Le rond ne peut pas vivre DANS le titre : <details> est un élément de
	flux, qu'un <h4> n'a pas le droit de contenir, et son intitulé se
	collerait au nom de la section pour une lecture d'écran — « Remplissage
	par créneau, aide remplissage ». Il vit donc à côté, dans une ligne qui
	les tient ensemble.

	La marge du haut se pose sur cette ligne, non sur le titre : celui-ci
	perd la sienne en devenant l'enfant d'une boîte souple.                */
.titre_bulle {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}
/*  Le titre se réduit à son texte, et sa marge passe sur la ligne.

	La largeur d'abord : la feuille donne « width: 100% » aux titres des
	sections, ce qui, dans une boîte souple, poussait le rond à l'autre
	bout de l'écran — le titre à gauche, son rond au milieu, et plus rien
	pour dire qu'ils vont ensemble. Le rond se colle au mot.

	La marge ensuite : une boîte souple centre les boîtes MARGES
	COMPRISES. Un titre à vingt-cinq pixels de marge haute posait donc
	son rond douze pixels trop bas. La marge revient à la ligne, qui la
	porte pour les deux.                                               */
.titre_bulle > h1,
.titre_bulle > h2,
.titre_bulle > h3,
.titre_bulle > h4,
.titre_bulle > h5,
.titre_bulle > p {
	flex: 0 1 auto;
	width: auto;
	margin-top: 0;
	margin-bottom: 0;
}

/*  UNE LIGNE CENTRÉE, ET UN NOM À ELLE.

	Le produit a déjà une classe « center », et elle porte
	« div.center { display: block } ». Posée sur la ligne d'un titre, elle
	en défaisait la boîte souple — même nombre de classes, un nom
	d'élément en plus, elle l'emportait — et le rond, redevenu un élément
	de ligne dans un bloc centré, s'en allait au milieu de l'écran pendant
	que son titre restait à gauche. La ligne porte donc son propre
	modificateur, que rien d'autre ne revendique.                       */
.titre_bulle_centre { justify-content: center; }

/*  UN TITRE À FILET. « titre_bloc » se souligne d'un trait qui traverse
	la section. Devenu l'enfant d'une boîte souple, il ne traversait plus
	que son propre texte. Le trait passe donc sur la ligne, qui fait
	toute la largeur, et le titre lui laisse sa bordure et ses marges.
	C'est le seul cas où le titre s'étire, et donc le seul où le rond se
	retrouve contre le bord droit.                                      */
.titre_bulle_filet {
	align-items: flex-end;
	margin: 26px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--club-ligne, #e2e2e2);
}
.titre_bulle_filet > .titre_bloc {
	flex: 1 1 auto;
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/*  OÙ L'ON NE POSE PAS DE ROND : la bande de chiffres du tableau de
	bord. Elle est découpée à ses angles (overflow: hidden), et rognerait
	le panneau d'une bulle posée dans une de ses cartes. Ce que les
	cartes ont à expliquer se dit donc au titre de la bande.            */

/* ======================================================================== */
/*  LE TÉLÉPHONE
	------------------------------------------------------------------------
	Le club tient sa feuille de séance au bord du tatami, et ses membres
	réservent dans le bus. Ce bloc n'invente aucune mise en page : la
	feuille est déjà souple, et un seul écran du produit débordait. Il
	corrige ce qu'un écran de trois cent quatre-vingt-dix pixels rend
	impraticable, et que rien ne révèle sur un ordinateur.

	Il est posé en dernier, et volontairement : il ne redessine rien, il
	relève des planchers.                                                  */
/* ======================================================================== */

@media (max-width: 640px) {

	/*  SEIZE PIXELS, ET PAS QUINZE.

		Safari sur iPhone agrandit la page dès qu'on touche un champ dont
		le texte fait moins de seize pixels — et ne la remet jamais comme
		elle était. Les champs du produit en faisaient quatorze ou quinze :
		toucher « Adresse email » sur la page de connexion faisait sauter
		le site à cent vingt pour cent, la colonne coupée à droite, et le
		membre finissait sa saisie dans une page qu'il ne pouvait plus
		recadrer. Sur la fiche d'un membre, la gérance corrigeait un
		numéro de téléphone dans un formulaire dont elle ne voyait plus la
		moitié.

		C'est un défaut de fonctionnement, non un goût de taille : d'où le
		« important », qui passe devant la dizaine de règles d'écran qui
		fixent quatorze ou quinze pixels. Le seuil est celui du
		navigateur ; on ne le négocie pas.                                */
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	select,
	textarea {
		font-size: 16px !important;
	}

	/*  Un champ n'est pas seulement à lire, il est à toucher. Trente-trois
		pixels de haut se manquent une fois sur trois. */
	form fieldset input:not([type="checkbox"]):not([type="radio"]),
	form fieldset select,
	form fieldset textarea,
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form input[type="tel"],
	form input[type="number"],
	form input[type="search"],
	form select {
		min-height: 44px;
	}
	/* Une hauteur fixe de trente-trois pixels tenait la liste déroulante
	   des petits cadres : elle rognait un texte de seize. */
	form fieldset.small_fieldset select { height: auto; }

	/*  LE PLANCHER DE LISIBILITÉ.

		Dix pixels et demi dans le pied de page, dix sur les notes d'aide,
		onze et demi sur les pastilles et les jours de l'horaire. Sur un
		téléphone tenu à bout de bras, dans une salle qui n'est pas un
		bureau, cela ne se lit pas.

		« max() » relève un plancher sans écraser ce qui est déjà plus
		grand : une note de treize pixels reste à treize.                 */
	small,
	.small,
	.aide_reglage,
	.chapitre_chapo,
	footer p,
	footer a,
	footer b,
	footer span {
		font-size: max(12.5px, 0.85em) !important;
	}
	.puce,
	.jour_nom,
	.cours_soustitre,
	.tuile_note,
	.formule_note,
	.vit_duree_note { font-size: max(12.5px, 0.85em); }
	/* Les titres de groupe du menu déroulant : dix pixels et demi, en
	   capitales espacées. La règle qui les pose porte deux identifiants
	   dans des :not() — aucune classe ne passe devant. */
	.sous_menu li.menu_groupe { font-size: 12px !important; }
	.compte, .compteur_fermetures { font-size: max(12px, 0.8em); }

	/*  QUARANTE-QUATRE PIXELS SOUS LE DOIGT.

		Les liens de texte du pied et des listes faisaient quinze à vingt
		pixels de haut, collés les uns aux autres. Le remplissage vertical
		leur rend une cible sans grossir le texte : c'est la hauteur qu'on
		vise, pas la lettre qu'on lit.                                    */
	footer a,
	footer .lien_bouton {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 2px 4px;
	}

	/*  Les liens légaux : une rangée souple plutôt qu'une phrase ponctuée
		de barres. Sur trois cent quatre-vingt-dix pixels, la phrase se
		coupait après une barre, et chaque ligne se terminait par un « | »
		qui ne séparait plus rien. Les barres disparaissent, l'espace les
		remplace.                                                         */
	footer .liens_legaux {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0 18px;
	}
	footer .liens_legaux .separate { display: none; }

	/*  Les liens d'action posés dans une phrase : « Indiquer qui
		prévenir → », « En savoir plus sur le club », « J'ai déjà un
		compte ». Ils mènent ailleurs, ils se touchent. */
	.dossier_intitule a,
	.vit_lien_discret,
	.vit_liens_section > a,
	.lien_tri,
	#page_compte .lien_tri,
	.filtres_publics a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	/*  Le rond « i » passe de dix-neuf pixels à vingt-quatre, et sa cible
		de trente et un à quarante. Le panneau, lui, s'ouvrait déjà en bas
		de l'écran sur cette largeur.

		La cible ne s'étend pas vers le bas autant que vers le haut : sous
		un rond posé au bout d'une étiquette se trouve le champ, et une
		cible qui le recouvrirait volerait le doigt de qui vient saisir. */
	.bulle_rond { width: 24px; height: 24px; font-size: 14px; }
	.bulle_rond::after { top: -13px; right: -8px; bottom: -7px; left: -8px; }

	/*  UNE CASE À COCHER FAIT VINGT-DEUX PIXELS, ET UN DOIGT DAVANTAGE.

		On ne peut pas agrandir la cible d'une case sans agrandir la case :
		un champ de formulaire n'accepte pas de pseudo-élément. C'est donc
		la LIGNE qui devient la cible — l'étiquette qui accompagne la case
		la coche déjà, et elle prend maintenant la hauteur d'un doigt. */
	form fieldset.fieldset_radio label,
	form fieldset.fieldset_checkbox label,
	label.case_reglage,
	.choix_jour {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/*  Le logo du club est un lien vers l'accueil, et il en faisait
		trente-huit de haut. */
	header .logo_club a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/*  Le dépliant des champs facultatifs de l'inscription, et le retour
		vers le choix d'intention : trente et vingt pixels, au milieu d'un
		formulaire qu'on remplit au pouce. */
	.details_inscription > summary { min-height: 44px; display: flex; align-items: center; }
	#page_inscription .titre_formulaire + p a { display: inline-flex; align-items: center; min-height: 40px; }

	/*  Les initiales des jours, dans le calendrier. La feuille du
		calendrier est un composant tiers, et le gabarit la charge APRÈS
		la nôtre : sans « important », onze pixels et deux dixièmes
		l'emportent. La même convention que les cinq autres retouches du
		calendrier, plus haut dans cette feuille. */
	.datepicker--day-name { font-size: 12px !important; }

	/*  LES TITRES QUI DÉPLIENT.

		« Créer un cours hebdomadaire », « Sous le bandeau d'ouverture »,
		et la ligne de chacun des dix-sept cours : sur les écrans du site
		et des encarts, ces bandes SONT la navigation, et elles faisaient
		trente-cinq pixels. C'est la cible qu'on vise le plus souvent sur
		ces écrans-là.

		Les dépliants en général suivent la même règle — sauf le rond
		« i », qui a la sienne juste en dessous.                          */
	h5.btn_form,
	summary:not(.bulle_rond) {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/*  APPELER UN MEMBRE DEPUIS SA LIGNE.

		Le numéro et l'adresse d'un membre sont des liens — « tel: » et
		« mailto: » — et c'est sur un téléphone qu'ils servent vraiment :
		la gérance appelle le parent d'un enfant qui n'est pas venu. Ils
		faisaient quinze pixels de haut, posés l'un contre l'autre. Ce
		sont des lignes de fiche, non des mots dans une phrase : on les
		espace sans toucher au reste.                                     */
	.joindre_membre a[href^="tel:"],
	.joindre_membre a[href^="mailto:"],
	.ligne_membre a[href^="tel:"],
	.ligne_membre a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		font-size: max(12.5px, 0.85em);
	}

	/*  L'ENCOCHE ET LA BARRE D'ACCUEIL.
		Le panneau d'une bulle se pose en bas de la fenêtre. Sur un iPhone
		récent, douze pixels le placent sous la barre d'accueil, où le
		doigt ne fait que renvoyer à l'écran d'accueil. */
	.bulle_texte { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

	/*  UN ONGLET COUPÉ NE SE DEVINE PAS.

		Sous huit cents pixels, la barre d'onglets défile en elle-même
		plutôt que de s'empiler sur trois lignes — c'est voulu, et le trait
		de l'onglet ouvert reste ainsi visible. Mais rien ne disait qu'il y
		avait une suite : le quatrième onglet était coupé net au bord, et
		« Mes parrainages » n'existait pas pour qui n'essayait pas de
		pousser la barre du doigt.

		Deux ombres portées, l'une à chaque bord, qui ne paraissent que du
		côté où il reste quelque chose à voir. C'est un dégradé attaché au
		contenu (« local ») doublé d'un dégradé attaché à la boîte
		(« scroll ») : le premier recouvre le second tant qu'on est au
		bout, et le découvre dès qu'on s'en éloigne. Aucun script.        */
	.onglets {
		background-image:
			linear-gradient(to right, var(--club-fond, #fff) 40%, rgba(255, 255, 255, 0)),
			linear-gradient(to left,  var(--club-fond, #fff) 40%, rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)),
			linear-gradient(to left,  rgba(0, 0, 0, .13), rgba(0, 0, 0, 0));
		background-position: 0 0, 100% 0, 0 0, 100% 0;
		background-repeat: no-repeat;
		background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	/*  La légende des comptes tient en deux colonnes : six lignes de
		couleurs avant le premier membre, c'était un écran de moins pour la
		liste. */
	.legende_membres {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 12px;
	}
	.legende_membres li { margin: 0; }

	/*  LA FICHE D'UN MEMBRE : L'INTITULÉ ET SA VALEUR.

		Chaque ligne est « <b>Adresse</b> Rue Dartois 44 4000 Liège », et
		l'intitulé réserve cent cinquante pixels. Il en reste cent
		soixante-dix pour la valeur : l'adresse passait à la ligne et
		repartait TOUT À GAUCHE, sous l'intitulé, si bien qu'on lisait
		« Adresse — Rue Dartois 44 » puis « 4000 Liège Belgique » comme
		deux renseignements distincts.

		Une ligne souple garde la valeur dans sa colonne, quel que soit le
		nombre de lignes qu'elle prend.                                   */
	.bloc_fiche p {
		display: flex;
		flex-wrap: wrap;
		gap: 0 8px;
	}
	.bloc_fiche p b {
		min-width: 0;
		flex: 0 0 auto;
	}
}

/*  UNE CARTE DE CHIFFRE QUI MÈNE QUELQUE PART.

    Les huit chiffres du tableau de bord sont devenus des liens : « deux
    impayés » mène aux impayés, « quatorze réservations aujourd'hui » au
    planning du jour. Une carte reste une carte — même fond, même
    découpe, même alignement — et se signale au survol comme au clavier.

    « color: inherit » et « text-decoration: none » sont indispensables :
    sans eux, les huit intitulés passeraient au bleu souligné du lien, et
    la bande deviendrait un pavé de liens là où elle était un relevé.  */
.chiffre_lien {
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease;
}
.chiffre_lien:hover,
.chiffre_lien:focus-visible {
	background-color: var(--club-surface-page, #f2f2f2);
}
.chiffre_lien:hover b,
.chiffre_lien:focus-visible b {
	color: var(--club-principale, #39449f);
}
/*  La flèche dit que la carte mène ailleurs, sans ajouter un mot : elle
	ne paraît qu'au survol, pour ne pas meubler huit cartes en
	permanence. */
.chiffre_lien span::after {
	content: " →";
	opacity: 0;
	transition: opacity .15s ease;
}
.chiffre_lien:hover span::after,
.chiffre_lien:focus-visible span::after { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
	.chiffre_lien, .chiffre_lien span::after { transition: none; }
}

/*  LE CHAMP DE RECHERCHE D'UN MEMBRE EST UNE LISTE DÉROULANTE.

	Il en a le comportement depuis qu'il s'ouvre au clic, sans qu'on ait
	à écrire : il lui manquait de le DIRE. Un chevron à droite, celui
	d'une liste, et la place qu'il faut pour ne pas recouvrir la fin du
	nom qu'on y lit.                                                   */
.recherche_membre { position: relative; }
.recherche_membre .champ_recherche_membre {
	padding-right: 34px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% + 1px),
		calc(100% - 13px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
/* La liste ouverte : le chevron se retourne, comme celui d'un select. */
.recherche_membre .champ_recherche_membre[aria-expanded="true"] {
	background-position:
		calc(100% - 13px) calc(50% - 2px),
		calc(100% - 18px) calc(50% - 2px);
}

/*  ACHETER UN ABONNEMENT : LE RYTHME, PUIS LA DURÉE.

	Le membre ne prend pas huit décisions mais deux — combien de fois par
	semaine il vient, puis pour combien de temps il s'engage. Une famille
	par rythme, et dans chacune les durées côte à côte, où elles se
	comparent enfin : c'est le rangement de la page publique des tarifs,
	d'où le membre arrive le plus souvent.                              */
.famille_abonnement {
	width: 100%;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 14px 16px;
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: var(--club-arrondi, 8px);
	background: var(--club-fond, #fff);
}
.famille_titre { margin: 0 0 10px; }
.famille_titre b { display: block; font-size: 15px; }
.famille_titre small { display: block; color: var(--club-texte-doux, #6b6e7b); }

.durees_abonnement {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 8px;
}

/*  Une durée est une carte que l'on touche en entier : l'étiquette
	enveloppe son bouton, et c'est elle qui porte le cadre. Le bouton
	reste dans le document — il se voit, il s'atteint au clavier, et une
	lecture d'écran l'annonce — mais c'est la carte qu'on vise du doigt. */
.duree_abonnement {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	position: relative;
	padding: 12px 14px 12px 38px;
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: var(--club-arrondi, 8px);
	background: var(--club-surface-page, #f7f7f9);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.duree_abonnement input {
	position: absolute;
	top: 13px;
	left: 13px;
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
}
.duree_abonnement:hover { border-color: var(--club-principale-claire, #c8cbe4); }
.duree_abonnement:focus-within,
.duree_abonnement:has(input:checked) {
	border-color: var(--club-principale, #39449f);
	background: var(--club-fond, #fff);
	box-shadow: inset 0 0 0 1px var(--club-principale, #39449f);
}

.duree_dite {
	font-weight: 600;
	line-height: 1.25;
}
.duree_prix {
	font-family: var(--club-chiffres, inherit);
	font-size: 17px;
	line-height: 1.2;
	color: var(--club-texte, #161a2e);
}
.duree_note {
	color: var(--club-texte-doux, #6b6e7b);
	line-height: 1.3;
}

/*  Sur un téléphone, deux cartes par rangée plutôt qu'une seule
	colonne : quatre durées tiennent en deux lignes, et se comparent
	encore. */
@media (max-width: 640px) {
	.durees_abonnement { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
	.duree_abonnement { padding: 12px 10px 12px 34px; }
	.duree_abonnement input { top: 12px; left: 10px; }
}

/*  LES PAIEMENTS COMMENCÉS ET JAMAIS ABOUTIS, REPLIÉS.

	Une commande ouverte puis abandonnée reste « Non payé » pour
	toujours. Passé deux jours, elle descend ici : ni effacée, ni au
	premier plan.

	Le dépliant doit borner sa largeur, faute de quoi le tableau qu'il
	contient prend celle de son contenu et pousse la page entière —
	mesuré à cinquante-huit pixels hors de l'écran sur la fiche d'un
	membre. Une boîte qui défile ne défile que si quelque chose lui dit
	où s'arrêter.                                                       */
.commandes_abandonnees {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: var(--club-arrondi, 8px);
	padding: 10px 14px;
	background: var(--club-surface-page, #f7f7f9);
}
.commandes_abandonnees > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--club-texte-doux, #6b6e7b);
}
.commandes_abandonnees[open] > summary {
	margin-bottom: 6px;
	color: var(--club-texte, #161a2e);
}
.commandes_abandonnees .tableau_defilant {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/*  Une pastille qui porte une phrase se coupe plutôt que de sortir de
	l'écran : sur un téléphone, « Affiliation en ordre jusqu'au
	13-09-2027 » est plus large que la page. */
@media (max-width: 640px) {
	.puce { white-space: normal; }
}

/*  ==================================================================
	LE TUTORIEL : CHERCHER, SITUER, LIRE D'UNE TRAITE
	==================================================================

	Trois ajouts, et un seul compte vraiment : le champ de recherche.
	Il est posé au-dessus des deux colonnes et prend toute la largeur,
	parce qu'il est le chemin le plus court vers n'importe lequel des
	vingt-cinq chapitres — pas le cinquième élément d'une colonne qui
	en porte déjà trente.                                               */
.recherche_aide {
	/*  « display: block » n'est pas décoratif : une règle générale pose
		« display: flex » sur tout formulaire de l'espace, et le champ
		se retrouvait alors dans une colonne de trois cents pixels, à
		côté de son intitulé, au milieu d'une carte qui en fait mille
		cent. Un champ de recherche qui occupe un quart de sa carte ne
		se voit pas. */
	display: block;
	max-width: var(--club-largeur, 1180px);
	margin: 0 auto 22px;
	padding: 14px 16px;
	background-color: var(--club-surface-page, #f7f7f9);
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: var(--club-arrondi, 8px);
}
.recherche_aide_titre {
	display: block;
	margin-bottom: 6px;
	/*  La même taille que « sommaire_titre », l'intitulé de la colonne
		voisine : deux étiquettes de même nature, à onze pixels et demi
		toutes les deux. Un demi-pixel d'écart entre elles se voit. */
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--club-texte-doux, #787a86);
}
/*  Le champ mange la ligne, le bouton prend ce qu'il lui faut. Sous
	560 pixels les deux passent l'un sous l'autre : un bouton
	« Chercher » réduit à quarante pixels ne se vise pas au pouce.      */
.recherche_aide_ligne {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 8px;
	align-items: stretch;
}
.recherche_aide_ligne input[type="search"] {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	font-size: 16px;
	background-color: var(--club-fond, #fff);
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: var(--club-arrondi, 4px);
	color: var(--club-encre, #1b1b1b);
}
.recherche_aide_ligne input[type="search"]:focus {
	border-color: var(--club-principale, #39449f);
	outline: none;
}
.recherche_aide_ligne .btn {
	flex: 0 0 auto;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 0 22px;
	white-space: nowrap;
}
.recherche_aide_note {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--club-texte-doux, #787a86);
}
.recherche_aide_note a {
	white-space: nowrap;
}

/*  Les mots proposés quand une recherche ne rend rien. Des pastilles,
	parce que ce sont des choses à toucher : proposés en liens soulignés
	dans une phrase, ils faisaient douze cibles de vingt pixels de haut
	les unes contre les autres, ce qu'un pouce ne vise pas.             */
.pistes_aide {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	text-align: left;
}
.pistes_aide a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	background-color: var(--club-fond, #fff);
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: 999px;
	text-decoration: none;
}
.pistes_aide a:hover, .pistes_aide a:focus {
	border-color: var(--club-principale, #39449f);
}

/*  UN RÉSULTAT EST UN PASSAGE, ET NON UN TITRE.

	Une liste de titres renvoie le lecteur au point de départ : il sait
	que le mot est quelque part dans ce chapitre-là. Le passage lui dit
	tout de suite si c'est le sien, et le mot trouvé est marqué pour
	que l'œil tombe dessus sans lire la phrase entière.                 */
.resultats_aide {
	list-style: none;
	max-width: 80ch;
	margin: 0;
	padding: 0;
}
.resultat_aide {
	padding: 12px 0;
	border-bottom: 1px solid var(--club-ligne, #e2e2e2);
}
.resultat_aide:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.resultat_titre {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.resultat_titre:hover, .resultat_titre:focus {
	text-decoration: underline;
}
.resultat_quoi {
	margin: 2px 0 6px;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: left;
	color: var(--club-texte-doux, #787a86);
}
.resultat_extrait {
	margin: 0 0 4px;
	font-size: 13.5px;
	line-height: 1.55;
	text-align: left;
	color: var(--club-encre, #1b1b1b);
}
/*  Le fond jaune du navigateur ne tient pas sur les fonds sombres de
	l'espace connecté, et la couleur du club ne tient pas toujours le
	contraste avec du texte foncé. Un fond clair et un trait sous le
	mot : lisible partout, sans dépendre du thème.                      */
.resultat_extrait mark {
	padding: 0 2px;
	background-color: var(--club-attention-fond, #fdf2d0);
	border-bottom: 2px solid var(--club-attention, #b5820a);
	color: #1b1b1b;
	font-weight: 600;
	border-radius: 2px;
}

/*  OÙ L'ON EN EST. Le chapitre s'ouvrait sur son titre seul : rien ne
	disait de quelle famille il relevait, ni s'il en restait vingt à
	lire ou deux. Sous mille pixels, où le sommaire passe au-dessus et
	se perd dans le défilement, ces deux repères sont tout ce qui
	reste.                                                              */
.chapitre_famille {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--club-texte-doux, #787a86);
}
.chapitre_famille b {
	color: var(--club-principale, #39449f);
}
/*  LE TITRE D'UN CHAPITRE ÉTAIT PLUS PETIT QUE SON PROPRE RÉSUMÉ.

	« #page_compte section h4 » habille tous les h4 de l'espace en
	intertitres : douze pixels et demi, capitales, gris doux. Le titre
	du chapitre en est un — il se lisait donc plus petit que le chapô
	de quatorze pixels et demi posé juste en dessous, et de la même
	couleur que les intertitres qu'il coiffe. Trois éléments gris
	empilés, et aucun ne dominait.

	Le sélecteur reprend l'identifiant : une classe seule ne pèse pas
	contre un « #page_compte », et la règle passait inaperçue.          */
#page_compte section h4.titre_chapitre {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--club-encre, #1b1b1b);
}

/*  La page qui porte tout le tutoriel. Un filet et un peu d'air entre
	deux chapitres : sans eux, vingt-cinq chapitres à la suite font un
	seul texte de six mille mots où l'on ne sait plus lequel on lit.    */
.chapitre_entier {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 2px solid var(--club-ligne, #e2e2e2);
}
.chapitre_entier:first-of-type {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
}
.retour_sommaire_page {
	margin: 10px 0 0;
	font-size: 12.5px;
	text-align: left;
}

/*  Le renvoi d'une entrée du lexique vers le chapitre qui la
	développe : une étiquette discrète en fin de définition, et non un
	lien au milieu de la phrase, qui se lirait comme une coupure.       */
.lexique_vers {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	font-size: 11.5px;
	white-space: nowrap;
	background-color: var(--club-surface-page, #f2f2f2);
	border: 1px solid var(--club-ligne, #e2e2e2);
	border-radius: 999px;
	text-decoration: none;
}
.lexique_vers:hover, .lexique_vers:focus {
	border-color: var(--club-principale, #39449f);
}

@media (max-width: 640px) {
	/*  Le bouton passe sous le champ et prend la ligne : au pouce, un
		bouton collé au bord droit d'un champ se manque une fois sur
		trois. */
	.recherche_aide { padding: 12px 12px; }
	.recherche_aide_ligne .btn { flex: 1 1 100%; }
	.resultat_extrait { font-size: max(13px, 0.9em); }
	/*  La pastille d'un renvoi est une pastille : elle se touche. */
	.lexique_vers {
		margin-left: 0;
		margin-top: 4px;
		min-height: 40px;
		display: inline-flex;
		align-items: center; }

	/*  LE TITRE D'UNE CARTE EST UN LIEN, ET IL FAISAIT VINGT PIXELS.

		Les fiches d'écran du chapitre « Les écrans, un par un » et les
		résultats de recherche portent leur lien dans un titre : une
		ligne de texte, haute de vingt pixels, qu'un pouce manque une
		fois sur deux. Le titre garde sa taille ; c'est sa zone
		cliquable qui s'étend à quarante pixels. */
	.fiche_ecran h5 a,
	.resultat_titre {
		display: flex;
		align-items: center;
		min-height: 40px; }

	/*  « Quitter la recherche » est une action, posée en fin de phrase :
		elle reste dans le fil du texte, mais sa boîte monte à quarante
		pixels. C'est le traitement que « lien_bouton » reçoit déjà
		ailleurs, pour la même raison. */
	.recherche_aide_note a {
		display: inline-flex;
		align-items: center;
		min-height: 40px; }
}

/*  À L'IMPRESSION, LA PAGE ENTIÈRE EST UN DOCUMENT.

	Un club qui forme un encadrant imprime le tutoriel. Le sommaire de
	gauche, la recherche et les liens « ce chapitre seul » n'ont aucun
	sens sur du papier, et chaque chapitre commence sur une page.       */
@media print {
	.recherche_aide,
	.colonne_sommaire,
	.retour_sommaire_page,
	.fil_chapitres,
	.sommaire_panneaux { display: none !important; }
	.chapitre_entier {
		break-before: page;
		page-break-before: always;
		border-top: 0;
		padding-top: 0; }
	.chapitre_entier:first-of-type {
		break-before: auto;
		page-break-before: auto; }
	.section_admin { break-inside: avoid-page; }
}

/*  LE SOMMAIRE SUR UN TÉLÉPHONE : DES PASTILLES, ET PLUS DE CADRE QUI
	DÉFILE DANS LA PAGE.

	Sous mille pixels les deux colonnes se superposent, et la colonne
	des chapitres devenait une boîte haute de trois cent vingt pixels
	qui défile TOUTE SEULE au milieu d'une page qui défile déjà. Au
	doigt, un pouce posé dessus fait bouger la boîte et non la page :
	c'est le piège classique du défilement emboîté, et il se paie à
	chaque ouverture du tutoriel.

	Les mêmes vingt-cinq entrées en pastilles tiennent en trois cents
	pixels sans rien cacher. La boîte n'a plus besoin de défiler, la
	page défile seule, et tous les chapitres restent visibles d'un
	coup d'œil. Réservé au tutoriel : l'autre écran qui emploie cette
	colonne n'a pas vingt-cinq entrées.                                 */
@media (max-width: 1000px) {
	.colonne_sommaire_tutoriel {
		max-height: none;
		overflow-y: visible; }
	.colonne_sommaire_tutoriel ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 4px; }
	.colonne_sommaire_tutoriel li {
		flex: 0 1 auto; }
	.colonne_sommaire_tutoriel a {
		min-height: 40px;
		padding: 6px 12px;
		align-items: center;
		background-color: var(--club-fond, #fff);
		border: 1px solid var(--club-ligne, #e2e2e2);
		border-radius: 999px; }
	.colonne_sommaire_tutoriel a.actif {
		box-shadow: none;
		border-color: var(--club-principale, #39449f);
		background-color: var(--club-fond, #fff); }
	.colonne_sommaire_tutoriel .marque_entree {
		margin-left: 6px; }
}

/*  ======================================================================
	ATELIER : LA DIRECTION RETENUE POUR L'ESPACE CONNECTÉ
	======================================================================

	Trois idées, et une contrainte.

	DE L'AIR, ET DES CARTES QUI SE POSENT. Les valeurs qui portent
	l'allure — l'arrondi des cartes, leur ombre, l'arrondi des boutons,
	le fond de l'espace — ne sont PAS ici : ce sont les défauts de
	src/acces/reglages.php, servis en variables. Un club qui veut ses
	cartes carrées ou sa couleur à lui les règle depuis sa
	configuration, et cette feuille suit. Ce qui est ici, c'est ce
	qu'aucun réglage ne porte : les retraits, les tailles de titre, la
	hiérarchie.

	LE TITRE DE L'ÉCRAN SORT DE LA CARTE. Il existait déjà — le
	« h1.fil_courant » du fil d'Ariane — mais il était peint à treize
	pixels, à côté du nom du groupe, comme un chemin. Il devient ce
	qu'il est : le titre de la page, posé sur le fond, au-dessus des
	cartes. Le groupe passe en surtitre. Rien n'est ajouté au document.

	UNE SEULE ACTION PRINCIPALE PAR ÉCRAN. Le bouton plein est réservé
	à celle-là ; tout ce qui filtre, trie ou range passe en pastille
	cerclée. C'est la règle qui rend la page lisible d'un coup d'œil,
	et elle se tient dans l'habillage plutôt que dans chaque écran.  */

/*  --------------------------------------------------------------
	1. Le titre de l'écran, sur le fond de page
	-------------------------------------------------------------- */
.barre_ecran {
	align-items: flex-start;
	padding: 20px 26px 4px;
	background-color: transparent;
	border-bottom: 0;
	/*  Elle ne colle plus : un titre de vingt-six pixels qui suit le
		défilement mange le quart de l'écran d'un téléphone, et la barre
		de navigation, elle, colle déjà. */
	position: static;
}
.barre_ecran .fil_ecran {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.barre_ecran .fil_groupe {
	/*  Douze, et non onze : c'est le plancher que le produit se donne
		pour un texte lu sur un téléphone, et ce surtitre paraît sur les
		quarante-six écrans. En capitales espacées, il tient son rôle de
		surtitre sans descendre sous le seuil. */
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--club-espace-doux, #686869);
}
/*  Le séparateur disait « / » entre deux choses désormais superposées. */
.barre_ecran .fil_separateur { display: none; }

.barre_ecran h1.fil_courant {
	display: block;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--club-espace-texte, #141414);
}
.barre_ecran .fil_qui {
	margin-top: 2px;
	color: var(--club-espace-doux, #686869);
}
.barre_ecran .fil_nom { color: var(--club-espace-doux, #686869); }
.barre_ecran .fil_role {
	border-radius: 999px;
	border-color: var(--club-espace-doux, #9a9aa8);
	color: var(--club-espace-doux, #686869);
}
.barre_ecran + .container { margin-top: 14px; }

/*  --------------------------------------------------------------
	2. Les cartes respirent
	-------------------------------------------------------------- */
#page_compte section {
	padding: 26px 28px;
	margin: 0 0 18px;
}
/*  Un titre de carte n'est plus le titre de la page : il perd le trait
	d'accent qui en faisait une enseigne, garde son filet, et cède la
	vedette au h1 posé au-dessus. */
#page_compte section > h3,
#page_compte section > form > h3 {
	font-size: 17px;
	letter-spacing: -.01em;
	padding-bottom: 11px;
	margin-bottom: 18px;
}
#page_compte section > h3::after,
#page_compte section > form > h3::after { display: none; }

/*  CE QUI EST DANS UNE CARTE EST MOINS ARRONDI QU'ELLE.

	Une ligne de liste qui reprend l'arrondi de la carte qui la porte
	devient une gélule, et le filet de couleur qui dit son état se fait
	rogner par le coin. Huit pixels de moins : les deux rayons
	s'accordent, et le rapport tient quel que soit le réglage du club —
	y compris à zéro, où le plancher garde un angle vif. */
body:not(#page_accueil):not(#page__en_construction).espace_club .list_form,
body:not(#page_accueil):not(#page__en_construction).espace_club .bloc_text,
body:not(#page_accueil):not(#page__en_construction).espace_club .cadre {
	border-radius: max(0px, calc(var(--club-carte-arrondi, 18px) - 8px));
}

/*  --------------------------------------------------------------
	3. Filtrer et trier n'est pas agir
	-------------------------------------------------------------- */
.lien_tri {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: 999px;
}
#page_compte .lien_tri {
	padding: 7px 16px;
	font-size: 13px;
}

/*  L'action principale se voit de loin : elle est la seule pleine, et
	elle a la hauteur d'un champ. */
#page_compte .btn {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
}

/*  --------------------------------------------------------------
	4. Le téléphone garde ses planchers
	-------------------------------------------------------------- */
@media (max-width: 640px) {
	.barre_ecran {
		padding: 16px 16px 2px;
		flex-wrap: wrap;
	}
	.barre_ecran h1.fil_courant { font-size: 22px; }
	#page_compte section { padding: 18px 16px; }
	.lien_tri { min-height: 40px; }
}

/*  --------------------------------------------------------------
	5. Ce qui demande un geste, en tête du tableau de bord
	--------------------------------------------------------------

	Une ligne par chose à faire : un filet de la couleur de l'état, la
	phrase qui la nomme, celle qui dit pourquoi, et le verbe qui y mène.
	Le filet est un bloc et non une bordure : une bordure de quatre
	pixels sur une carte arrondie se fait rogner par le coin, et ce
	motif-là — le trait de couleur à gauche d'un encadré — est
	précisément celui que la maquette écarte.                          */
.attention_bord {
	display: flex;
	flex-direction: column;
}
.attention_ligne {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--club-carte-rayure, #f1f1f1);
}
.attention_ligne:last-child { border-bottom: 0; padding-bottom: 2px; }
.attention_filet {
	flex: 0 0 auto;
	width: 6px;
	align-self: stretch;
	min-height: 38px;
	border-radius: 999px;
	background: var(--club-neutre, #525667);
}
.attention_attention .attention_filet { background: var(--club-attention, #8a5a08); }
.attention_alerte    .attention_filet { background: var(--club-alerte, #a32b2b); }

.attention_dit {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex-grow: 1;
	min-width: 0;
}
.attention_dit b {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--club-carte-texte, #141414);
}
.attention_dit small {
	font-size: 13px;
	line-height: 1.45;
	color: var(--club-carte-doux, #6b6b6b);
}
.attention_verbe {
	flex: 0 0 auto;
	white-space: nowrap;
}
.attention_calme {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--club-carte-doux, #6b6b6b);
}

/*  --------------------------------------------------------------
	6. La bande de veille : les chiffres qu'on surveille sans agir
	-------------------------------------------------------------- */
.bande_veille {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: baseline;
	margin-top: 18px;
	padding-top: 15px;
	border-top: 1px solid var(--club-carte-rayure, #f1f1f1);
}
.veille {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 26px;
	font-size: 13px;
	color: var(--club-carte-doux, #6b6b6b);
	text-decoration: none;
}
.veille span { color: inherit; }
.veille b {
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 15px;
	font-weight: 500;
	color: var(--club-carte-texte, #141414);
}
.veille_alerte b { color: var(--club-alerte, #a32b2b); }
.veille_lien:hover, .veille_lien:focus { text-decoration: underline; }

@media (max-width: 640px) {
	/*  EN LIGNE, LE FILET SE RETROUVAIT SEUL SUR SA PROPRE LIGNE.

		La rangée passait à la ligne faute de place, et le filet — étiré
		sur la hauteur de la première ligne — se posait au-dessus du
		texte comme un trait sans objet. Une grille de deux colonnes le
		garde à gauche de tout ce qui le suit, le verbe compris. */
	.attention_ligne {
		display: grid;
		grid-template-columns: 6px minmax(0, 1fr);
		align-items: start;
		gap: 10px 14px;
	}
	.attention_filet { grid-row: 1 / span 2; align-self: stretch; }
	.attention_dit   { grid-column: 2; }
	.attention_verbe { grid-column: 2; justify-self: start; }
	.bande_veille { gap: 12px 20px; }
	/*  Un chiffre de veille est un lien : quarante pixels, comme tout
		ce qui se touche dans ce produit. */
	.veille { min-height: 40px; }
}

/*  --------------------------------------------------------------
	7. Le premier titre d'une carte est le titre de la carte
	--------------------------------------------------------------

	« #page_compte section > h4 » habille TOUS les h4 de l'espace en
	intertitres : douze pixels et demi, capitales, gris doux. C'est
	juste pour un titre de sous-partie, au milieu d'une carte. Ce ne
	l'est pas pour le PREMIER, qui nomme la carte entière : il se
	lisait plus petit que le texte qu'il coiffe, et les cartes d'un
	écran se suivaient sans qu'aucune s'annonce.                      */
/*  La vérification a compté : sur soixante-deux cartes, le titre se
	disait de cinq façons — h3 de 17px quarante-trois fois, h4 sept
	fois, h5 quatre fois, h3 de 21px deux fois, h4 de 19px une fois.
	Les balises sont rentrées dans le rang côté écrans ; cette règle
	fait le reste, pour que le rang d'un titre ne change plus jamais
	son allure : le PREMIER titre d'une carte est le titre de la
	carte, quel que soit le nom de sa balise.                        */
/*  Et le h3 qui n'est pas le premier enfant direct de sa carte — parce
	qu'un fil de groupe ou une colonne s'intercale — retombait sur les
	vingt et un pixels du h3 de base : plus gros que le titre de
	l'écran lui-même. Dans l'espace connecté, un h3 nomme une carte,
	et un h4 une sous-partie ; le premier a donc une seule taille.    */
#page_compte section h3 {
	font-size: 16.5px;
	line-height: 1.3;
}
#page_compte section > h3:first-child,
#page_compte section > h4:first-child,
#page_compte section > h5:first-child,
#page_compte section > .titre_bulle:first-child > h3,
#page_compte section > .titre_bulle:first-child > h4,
#page_compte section > .titre_bulle:first-child > h5 {
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	text-transform: none;
	color: var(--club-carte-texte, #141414);
	margin: 0 0 14px;
}
/*  Le rond « i » suit son titre : il reprenait la marge haute de
	trente pixels de l'intertitre et flottait sous lui. */
#page_compte section > .titre_bulle:first-child {
	margin-bottom: 14px;
}
#page_compte section > .titre_bulle:first-child > h4 {
	margin-bottom: 0;
}

/*  --------------------------------------------------------------
	8. Les chiffres du bord : des colonnes d'air, pas une grille
	--------------------------------------------------------------

	La bande était un tableau cerné, ses tuiles séparées par des
	traits : posée dans une carte, cela faisait un cadre dans un
	cadre, et quatre nombres en cellules de tableur. Dans une carte,
	l'air suffit à séparer — le trait ne sert que lorsque la bande
	est seule sur le fond de page.                                    */
/*  Le sélecteur reprend la forme de celui qui peint les cartes —
	« body:not(#…):not(#…).espace_club .chiffres_bord » — sinon la bande
	gardait son fond, son trait et son ombre de carte : deux « :not »
	portant un identifiant pèsent deux identifiants, et « #page_compte »
	seul ne fait pas le poids. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	gap: 8px 28px;
	margin-bottom: 0;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre {
	background-color: transparent;
	box-shadow: none;
	padding: 4px 0 2px;
	flex: 1 1 170px;
	border-radius: var(--club-arrondi, 10px);
}
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre span {
	min-height: 0;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: none;
}
/*  « membres actifs » commence par une majuscule à l'affichage. La
	chaîne, elle, reste en minuscules : elle se lit aussi en cours de
	phrase ailleurs, et « capitalize » aurait mis une majuscule à
	chaque mot. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre span::first-letter {
	text-transform: uppercase;
}
/*  LA VALEUR QUI N'EST PAS UN NOMBRE NE PREND PAS SA TAILLE.

    Trente pixels de chasse fixe, c'est ce qu'il faut pour qu'un « 12 »
    se lise d'un bout de la bande à l'autre. « aucun certificat » à
    trente pixels tient sur deux lignes et écrase ses voisins ; la
    fonte était corrigée, la taille venait d'ici et gagnait par ses
    deux identifiants.                                               */
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre b.chiffre_mot {
	font-family: var(--club-police, inherit);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre b {
	font-size: 30px;
	letter-spacing: -.02em;
	padding-top: 6px;
}
/*  Une tuile cliquable doit se voir cliquable : sans son cadre, il ne
	restait que la couleur du texte. Le survol pose l'aplat que le
	trait dessinait. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre_lien {
	padding: 4px 10px 2px;
	margin: 0 -10px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre_lien:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .chiffres_bord .chiffre_lien:focus {
	background-color: var(--club-carte-rayure, #f1f1f1);
}

/*  Le nombre que porte un onglet de filtre : il compte, il ne crie pas.
	Sur la pastille active — un aplat plein — il reprend l'encre du
	bouton, sans quoi un gris doux sur fond indigo tombe à 2,1 pour un. */
.compte_filtre {
	margin-left: 5px;
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-weight: 500;
	opacity: .72;
}
.lien_tri.actif .compte_filtre { opacity: .85; }
.compte_filtre_attention { color: var(--club-attention, #8a5a08); opacity: 1; }
.lien_tri.actif .compte_filtre_attention { color: inherit; }

/*  La phrase qui suit le titre de page et dit l'essentiel en chiffres. */
.chapo_ecran {
	margin: 0 0 4px;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: left;
	color: var(--club-carte-doux, #6b6b6b);
}
.chapo_ecran b { color: var(--club-carte-texte, #141414); font-weight: 600; }

/*  --------------------------------------------------------------
	9. « Mon solde » : la barre qui porte le choix, le prix et l'action
	--------------------------------------------------------------

	Une seule action, à la fin d'un choix, avec ce qu'elle engage écrit
	juste à côté. Le fond sombre n'est pas décoratif : il sépare la
	barre des dix cartes cochables au-dessus, dont aucune ne doit se
	lire comme le bouton.                                             */
.barre_choix {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	/*  Le formulaire de l'espace est lui-même une boîte flexible : sans
		largeur imposée, la barre se réduisait à son contenu et flottait
		au milieu, comme un encadré posé là. */
	width: 100%;
	box-sizing: border-box;
	margin-top: 18px;
	padding: 16px 22px;
	border-radius: var(--club-carte-arrondi, 18px);
	/*  LA BARRE PREND LA COULEUR DU CLUB, ET NON SON ENCRE.

	    Le fond n'est pas décoratif : il sépare la barre des cartes
	    cochables au-dessus, dont aucune ne doit se lire comme le
	    bouton. Mais il était pris dans « espace-texte », qui est
	    l'ENCRE de la page — un noir à treize pour cent de gris. Sur un
	    espace où rien d'autre n'est noir, cela posait une dalle
	    étrangère à la palette, la même chez tous les clubs quelle que
	    soit leur couleur.

	    La couleur principale du club fait le même travail — se
	    détacher — en restant de la maison, et suit le club qui la
	    change.                                                        */
	background: var(--club-principale-fonce, var(--club-principale, #2b3377));
	color: #fff;
}
.barre_choix_dit {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-grow: 1;
	min-width: 0;
}
.barre_choix_dit b {
	font-size: 15px;
	font-weight: 600;
	color: var(--club-fond, #fff);
}
.barre_choix_dit small {
	font-size: 12.5px;
	/*  Sur un aplat sombre, « texte-doux » est une encre de page : elle
		y tomberait sous le seuil. Le blanc atténué tient le contraste
		quelle que soit la couleur choisie par le club. */
	color: rgba(255, 255, 255, .72);
}
.barre_choix_prix {
	flex: 0 0 auto;
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--club-fond, #fff);
}
/*  Le bouton du club serait de sa couleur sur un fond presque noir :
	deux aplats foncés l'un sur l'autre. Il s'inverse. */
.barre_choix .btn,
.barre_choix button.btn {
	flex: 0 0 auto;
	margin: 0;
	background-color: var(--club-fond, #fff);
	border-color: var(--club-fond, #fff);
	color: var(--club-espace-texte, #141414);
	font-weight: 600;
}
.barre_choix .btn:hover,
.barre_choix .btn:focus,
.barre_choix button.btn:hover,
.barre_choix button.btn:focus {
	background-color: var(--club-carte-rayure, #f1f1f1);
	border-color: var(--club-carte-rayure, #f1f1f1);
	color: var(--club-espace-texte, #141414);
}

@media (max-width: 640px) {
	.barre_choix { gap: 12px; padding: 14px 16px; }
	.barre_choix_prix { font-size: 20px; }
	.barre_choix .btn, .barre_choix button.btn { flex: 1 1 100%; }
}

/* ======================================================================== */
/*  Vérification V — ce qui n'était un formulaire que pour la mise en page  */
/* ======================================================================== */

/* Neuf blocs du produit ouvraient un « form » pour disposer leur contenu
   en grille : deux liens d'appel à l'action, trois panneaux qui ne font
   que montrer une commande, un décompte par semaine, un événement
   complet. Aucun ne portait le moindre champ. Une lecture d'écran y
   annonçait « formulaire » là où il n'y a rien à saisir, et le script du
   produit — qui détourne TOUT envoi de formulaire vers traitement.php —
   n'avait aucune raison de les connaître.

   Ils sont redevenus des conteneurs ordinaires. Ces règles leur rendent
   la grille que la règle « form » leur donnait, et rien d'autre. */
.fiche_pliee {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
.fiche_pliee > .cellule_pleine,
.fiche_pliee > .cellule_semaine {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}
.fiche_pliee > .cellule_semaine {
	width: 50%;
}
.fiche_pliee > .cellule_semaine.cellule_annee {
	width: 100%;
	margin-top: 18px;
}
@media (max-width: 640px) {
	.fiche_pliee > .cellule_semaine { width: 100%; }
}

/* Un champ posé dans un tableau d'administration prenait
   « --club-arrondi » quand le champ ordinaire est à 8px : deux rayons
   pour un même composant, visibles côte à côte sur « Impayés et avoirs »
   et sur la fiche d'un membre. Le champ n'a qu'un rayon. */
#page_compte .tableau_admin td form input,
#page_compte .tableau_admin td form select,
#page_compte .table_seance td form input,
#page_compte .table_seance td form select {
	border-radius: 8px;
}

/* ======================================================================== */
/*  La reprise « Atelier », deuxième temps : la coque de la planche         */
/* ======================================================================== */

/*  ----------------------------------------------------------------
    1. La barre : marque et nom, navigation, puis la personne
    ----------------------------------------------------------------

    La planche retenue range la barre en trois temps : à gauche la
    marque du club ET SON NOM, au milieu la navigation, à droite ce qui
    appartient à la personne — son geste quotidien, puis elle-même en
    pastille ronde.

    Le produit n'avait ni le nom, ni la pastille, et posait « Réserver »
    en bouton bleu plein COLLÉ AU LOGO : le premier objet de la page
    était une commande, avant même de savoir de quel club il s'agit et
    où l'on se trouve.                                                */

body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .logo_club > a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .nom_enseigne {
	font-size: 14.5px;
	/*  L'italique venait de l'habillage du logo-en-toutes-lettres, celui
	    qu'un club sans image obtient : une enseigne posée à côté d'une
	    image n'a pas à pencher. La POLICE, elle, reste celle que le club
	    a choisie pour ses titres — c'est son identité. */
	font-style: normal;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--club-espace-texte, #141414);
	white-space: nowrap;
}

/*  Le bout droit. « margin-left: auto » le pousse contre le bord :
    la navigation garde sa place naturelle au milieu.                */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .bout_barre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	flex: 0 0 auto;
}

/*  « Réserver » garde sa pastille pleine — c'est le geste quotidien du
    membre, et le club a demandé qu'il soit atteignable de partout —
    mais il la garde À DROITE, où l'œil cherche une commande, et non
    devant la navigation.                                             */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_reserver {
	margin: 0;
	min-width: 0;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	/*  Quarante pixels : le plancher que le produit se donne pour tout
	    ce qui se touche. */
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

/*  La personne connectée, en pastille ronde de trente-quatre pixels.
    Son nom entier reste dans le document pour les aides techniques, et
    au survol pour tout le monde.                                      */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .pastille_moi {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/*  Le même fond que la pastille active de la navigation : la
	    planche les donne d'une seule teinte, et le jeton existe déjà. */
	background: var(--club-barre-actif, #ECEBF2);
	color: var(--club-barre-texte, #5C5C6B);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: 1px solid transparent;
}
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .pastille_moi:hover,
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .pastille_moi:focus-visible {
	background: var(--club-carte-rayure, #E3E2EC);
	color: var(--club-espace-texte, #141414);
}

/*  « Plus » était enfermé dans un cadre, seul objet cerné de la barre :
    c'est une entrée de navigation comme les autres, et elle s'habille
    comme les autres.                                                  */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute #btn_menu_plus {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/*  ----------------------------------------------------------------
    2. L'en-tête d'écran : titre, contexte, note, action
    ---------------------------------------------------------------- */

.barre_ecran {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 26px 26px 6px;
}
/*  Vingt-huit pixels, comme la planche : le titre d'un écran est la
    plus grosse chose de la page, et il ne l'était pas.               */
.barre_ecran h1.fil_courant {
	font-size: 28px;
	letter-spacing: -.022em;
}
/*  La ligne qui répond à « où en suis-je » avant qu'on ait cherché.  */
.barre_ecran .fil_contexte {
	margin: 5px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--club-espace-doux, #686869);
	max-width: 70ch;
}
.barre_ecran .fil_cote {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	padding-bottom: 4px;
}
.barre_ecran .fil_note {
	font-size: 13.5px;
	color: var(--club-espace-doux, #686869);
	white-space: nowrap;
}
/*  L'action principale de l'écran, une seule, en pastille pleine. */
.barre_ecran .btn.fil_faire {
	margin: 0;
	min-width: 0;
	min-height: 44px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.barre_ecran {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding: 18px 18px 4px;
	}
	.barre_ecran h1.fil_courant { font-size: 23px; }
	.barre_ecran .fil_cote { flex-wrap: wrap; gap: 10px; padding-bottom: 0; }
	.barre_ecran .btn.fil_faire { width: 100%; justify-content: center; }
}

/*  ----------------------------------------------------------------
    3. La carte se détache par son ombre, pas par un second trait
    ----------------------------------------------------------------

    La planche retenue pose une carte blanche, d'un rayon de seize
    pixels, portée par une ombre en deux couches — ET RIEN D'AUTRE.
    Le produit y ajoutait un filet d'un pixel : à un millimètre de
    l'arête que l'ombre dessine déjà, il faisait un cadre dans un
    cadre, et la carte paraissait collée sur la page au lieu d'être
    soulevée au-dessus.

    Le trait reste réglable — « Trait autour des cartes », sous les
    réglages de l'espace — et reste employé partout où il sépare
    vraiment deux choses : entre deux lignes d'une liste, autour d'un
    champ, sous un en-tête de tableau.

    La marge intérieure suit elle aussi la planche : vingt-quatre en
    haut, vingt-six sur les côtés.                                   */
body:not(#page_accueil):not(#page__en_construction).espace_club section,
body:not(#page_accueil):not(#page__en_construction).espace_club .tuile,
body:not(#page_accueil):not(#page__en_construction).espace_club .chiffres_bord {
	border-style: solid;
	border-width: var(--club-carte-bordure, 0);
}
#page_compte section {
	padding: 24px 26px;
	margin: 0 0 20px;
}

/*  ----------------------------------------------------------------
    4. Le tableau de bord, au plus près de la planche
    ---------------------------------------------------------------- */

/*  Le surtitre d'une carte dont le contenu porte les titres. Douze
    pixels et non onze : c'est le plancher que le produit se donne
    pour un texte lu sur un téléphone, et les capitales espacées
    tiennent le rôle sans descendre dessous.                        */
#page_compte section > .titre_bulle_surtitre > h4.surtitre_carte,
#page_compte section h4.surtitre_carte {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--club-carte-doux, #5c5c6b);
	margin: 0 0 4px;
}
#page_compte section > .titre_bulle_surtitre { margin-bottom: 8px; }

/*  La barre d'état d'une alerte : huit pixels de large, quarante de
    haut, comme la planche. À six, elle se lisait comme un filet de
    séparation plutôt que comme la marque d'un état.                */
.attention_filet {
	width: 8px;
	min-height: 40px;
}

/*  LA BANDE DE VEILLE DISAIT SES LIBELLÉS EN BLEU.

    Chaque chiffre de veille est un lien, et la règle des liens de
    l'espace l'emportait sur celle de la bande : le libellé « impayés
    (2 commandes) » se lisait en bleu souligné au survol, c'est-à-dire
    comme une commande. La planche les donne en gris ; c'est la VALEUR
    qui porte la couleur, et elle seule, parce que c'est elle qui dit
    s'il y a lieu de s'inquiéter.                                    */
body:not(#page_accueil):not(#page__en_construction).espace_club .bande_veille a.veille,
body:not(#page_accueil):not(#page__en_construction).espace_club .bande_veille a.veille:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club .bande_veille a.veille:focus {
	color: var(--club-carte-doux, #6b6b6b);
}
body:not(#page_accueil):not(#page__en_construction).espace_club .bande_veille a.veille span {
	color: inherit;
}
.veille_lien:hover span, .veille_lien:focus span { text-decoration: underline; }
.veille_lien:hover, .veille_lien:focus { text-decoration: none; }

/*  ----------------------------------------------------------------
    5. « Les comptes » : des lignes qui respirent, et qui mènent
    ----------------------------------------------------------------

    La planche retenue donne à chaque membre une LIGNE, et non une
    carte : un avatar de quarante-deux pixels, le nom en seize, ses
    coordonnées dessous, sa formule alignée à droite, une pastille
    « Ouvrir » au bout, et un filet d'un pixel pour séparer la ligne
    de la suivante.

    Le produit en faisait quarante petites cartes empilées, chacune
    avec son arrondi, son ombre et son liseré de couleur à gauche :
    quarante cadres dans un cadre, hauts de trente pixels, où le nom
    se lisait en quatorze et le courriel en dix et demi.            */

body:not(#page_accueil):not(#page__en_construction).espace_club .list_form {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
	/*  La ligne, sa commande et son panneau : deux colonnes, deux
	    rangées. Le panneau court sous les deux colonnes.            */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
	border-bottom: 1px solid var(--club-carte-rayure, #f1f0f5);
}
body:not(#page_accueil):not(#page__en_construction).espace_club .list_form:last-of-type {
	border-bottom: 0;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .list_form > .slide_form {
	grid-column: 1 / -1;
}

#page_compte .ligne_membre {
	padding: 16px 0;
	gap: 16px;
	line-height: 1.35;
	/*  Le liseré de couleur devient une pastille, posée contre le nom :
	    un trait vertical au bord d'une carte se lisait comme la bordure
	    de la carte, pas comme un état. */
	box-shadow: none !important;
	background: transparent !important;
}
#page_compte .ligne_membre .vignette_membre {
	width: 42px;
	height: 42px;
	min-width: 42px;
	font-size: 13px;
	border-radius: 50%;
}
#page_compte .ligne_membre .identite_membre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
#page_compte .ligne_membre .nom_membre {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--club-carte-texte, #141414);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
#page_compte .ligne_membre .nom_membre small {
	font-size: 12px;
	font-weight: 400;
	color: var(--club-carte-doux, #5c5c6b);
}
#page_compte .ligne_membre .joindre_membre {
	font-size: 13px;
	color: var(--club-carte-doux, #5c5c6b);
}
#page_compte .ligne_membre .joindre_membre a {
	font-size: 13px;
	min-height: 0;
}

/*  L'ÉTAT, EN PASTILLE CONTRE LE NOM.

    La couleur disait depuis quand le membre n'a plus réservé. Elle
    tenait en un liseré de quatre pixels au bord de la carte ; elle
    tient maintenant en un point de sept pixels, à droite du nom,
    comme la planche le pose. La légende au-dessus de la liste ne
    change pas de mots : elle décrit le même repère.                */
#page_compte .ligne_membre .nom_membre::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--club-succes, #1b7a4b);
}
#page_compte .ligne_membre.membre_eloigne  .nom_membre::after { background: #d9a13b; }
#page_compte .ligne_membre.membre_lointain .nom_membre::after { background: #e07b2e; }
#page_compte .ligne_membre.membre_perdu    .nom_membre::after { background: #d64545; }
#page_compte .ligne_membre.membre_jamais   .nom_membre::after { background: #9a9aa2; }

/*  La formule, alignée à droite, sur deux lignes comme la planche. */
#page_compte .ligne_membre .compte_abo,
#page_compte .ligne_membre .compte_credits {
	font-size: 13.5px;
	text-align: right;
}

/*  « Ouvrir » : la pastille de contour du bout de ligne. */
#page_compte .list_form > .btn.ouvrir_fiche {
	margin: 0;
	min-width: 0;
	min-height: 40px;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	align-self: center;
}

@media (max-width: 640px) {
	body:not(#page_accueil):not(#page__en_construction).espace_club .list_form {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
		padding-bottom: 4px;
	}
	#page_compte .list_form > .btn.ouvrir_fiche {
		width: 100%;
		justify-content: center;
		margin-bottom: 12px;
	}
	#page_compte .ligne_membre { padding: 14px 0 4px; gap: 12px; }
	#page_compte .ligne_membre .vignette_membre { width: 36px; height: 36px; min-width: 36px; }
}

/*  ----------------------------------------------------------------
    5 bis. Les mesures de la ligne, avec le poids qu'il faut
    ----------------------------------------------------------------

    Les règles de l'espace connecté sont toutes écrites
    « body:not(#page_accueil):not(#page__en_construction).espace_club X »
    — deux identifiants, parce que « :not() » prend le poids de son
    argument. Une règle écrite « #page_compte X » pèse moins et perd,
    même posée après. Celles-ci reprennent donc la même forme.        */

body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre {
	padding: 16px 0;
	gap: 16px;
	line-height: 1.35;
	border: 0;
	background: transparent;
	box-shadow: none;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .vignette_membre {
	/*  « max-height » et « flex » bornaient la vignette à vingt-cinq
	    pixels : sans les reprendre, la largeur passait à quarante-deux
	    et la hauteur restait à vingt-cinq — un ovale. */
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	min-width: 42px;
	max-height: 42px;
	font-size: 13px;
	border-radius: 50%;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .identite_membre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .nom_membre {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.005em;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .nom_membre small {
	font-size: 12px;
	font-weight: 400;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .joindre_membre {
	display: block;
	font-size: 13px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .joindre_membre a { font-size: 13px; }

/*  L'état, en pastille contre le nom : un liseré de quatre pixels au
    bord d'une carte se lisait comme la bordure de la carte, pas comme
    un état. La légende au-dessus de la liste décrit le même repère.  */
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .nom_membre::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--club-succes, #1b7a4b);
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre.membre_eloigne  .nom_membre::after { background: #d9a13b; }
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre.membre_lointain .nom_membre::after { background: #e07b2e; }
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre.membre_perdu    .nom_membre::after { background: #d64545; }
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre.membre_jamais   .nom_membre::after { background: #9a9aa2; }

body:not(#page_accueil):not(#page__en_construction).espace_club .list_form > .btn.ouvrir_fiche {
	margin: 0;
	min-width: 0;
	min-height: 40px;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	align-self: center;
}

@media (max-width: 640px) {
	body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre { padding: 14px 0 4px; gap: 12px; }
	body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .vignette_membre { width: 36px; height: 36px; min-width: 36px; }
	body:not(#page_accueil):not(#page__en_construction).espace_club .list_form > .btn.ouvrir_fiche { width: 100%; justify-content: center; margin-bottom: 12px; }
}

/*  L'AFFILIATION SE POSE SUR LA VIGNETTE.

    La pastille qui dit « affiliation en ordre » ouvrait la ligne, seule
    dans une colonne de neuf pixels : une colonne pour un point, et la
    file des visages décalée d'autant. Elle se pose sur le visage, au
    coin, comme un état se pose sur ce qu'il qualifie.               */
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .vignette_membre { order: 1; }
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .pastille_ordre {
	order: 2;
	position: relative;
	align-self: flex-end;
	margin: 0 0 2px -15px;
	z-index: 2;
	box-shadow: 0 0 0 2px var(--club-carte-fond, #fff);
}
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .identite_membre { order: 3; }

@media (max-width: 640px) {
	/*  Appeler ou écrire à un membre depuis la liste est le geste le
	    plus fréquent de cet écran, et sur un téléphone c'est justement
	    là qu'il se fait. Les deux liens tenaient en dix-neuf pixels de
	    haut — la moitié du plancher que le produit se donne. Ils
	    gardent leur taille de texte et gagnent la place autour.      */
	body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .joindre_membre a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 2px;
	}
	body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre .joindre_membre {
		display: flex;
		flex-wrap: wrap;
		gap: 0 16px;
	}
}

/*  L'ORDRE DES QUATRE MORCEAUX DE LA LIGNE.

    Poser « order » sur trois enfants d'un conteneur souple en donne
    zéro au quatrième — et zéro passe AVANT un. La formule du membre,
    seule à ne pas l'avoir reçu, s'était rangée tout à gauche, devant
    le visage. Les quatre sont numérotés, et la formule reprend sa
    place au bout de la ligne, contre la commande.                   */
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_abo,
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_credits,
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_seances,
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_impaye,
body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_impaye_attente {
	order: 4;
	margin-left: auto;
	text-align: right;
	flex: 0 0 auto;
}

@media screen and (max-width: 1000px) {
	/*  LE RANG DU BOUT DE BARRE SUR TÉLÉPHONE.

	    La barre du téléphone numérote ses morceaux — l'enseigne en 1,
	    le bouton « Menu » en 3, la navigation en 4 — et le bout de
	    barre, nouveau venu, n'avait pas de rang : zéro passe avant un,
	    et « Réserver » et la pastille se rangeaient DEVANT l'enseigne,
	    tout à gauche de l'écran. Il prend le rang 2, celui que « Réserver »
	    occupait déjà lorsqu'il était seul.                             */
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .bout_barre {
		order: 2;
		flex: 0 0 auto;
		margin-left: 0;
		gap: 8px;
	}
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .bout_barre .btn.btn_reserver {
		padding: 8px 14px;
		font-size: 13px;
	}
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > button.menu_mobile { order: 3; }
}

@media screen and (max-width: 480px) {
	/*  Sur un écran étroit, l'enseigne garde sa marque et perd son nom :
	    trois objets et un nom de club ne tiennent pas sur trois cent
	    quatre-vingt-dix pixels, et c'est le nom qui se répète le moins
	    utilement — la page en dessous le dit déjà.                    */
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .nom_enseigne { display: none; }
}

/* ======================================================================== */
/*  La reprise « Atelier », troisième temps : les composants partagés       */
/* ======================================================================== */
/*
    LES DEUX PREMIERS TEMPS N'AVAIENT TOUCHÉ QUE TROIS ÉCRANS.

    Le tableau de bord, les comptes et le solde avaient été repris un
    par un ; les quarante-trois autres gardaient l'habillage d'origine,
    et c'est lui qu'on voit en ouvrant « Réserver une séance » ou
    « Tarifs ». Un écran ne s'habille pas à la main : il est fait d'une
    poignée de composants — un titre de carte, un sous-titre, un
    paragraphe, un champ, un bouton, un panneau, un tableau. Ce sont
    eux qui sont repris ici, et les quarante-six écrans suivent.

    Tous les sélecteurs portent le préfixe de l'espace connecté —
    « body:not(#page_accueil):not(#page__en_construction).espace_club » —
    parce que « :not() » prend le poids de son argument : ce préfixe
    pèse deux identifiants, et une règle plus légère, même posée après,
    perdrait.                                                           */

/*  ----------------------------------------------------------------
    1. Le titre d'une carte ne se souligne pas
    ----------------------------------------------------------------

    Chaque carte portait un filet pleine largeur sous son titre, et un
    court trait de couleur posé dessus. C'est l'enseigne d'une page,
    pas le titre d'une carte : répétée cinq fois sur un écran, elle
    découpe la carte en tranches et fait un second cadre à l'intérieur
    du premier. La planche retenue n'en a aucun — le blanc suffit.   */
body:not(#page_accueil):not(#page__en_construction).espace_club section > h3,
body:not(#page_accueil):not(#page__en_construction).espace_club section > form > h3 {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 16px;
	letter-spacing: -.01em;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section > h3::after,
body:not(#page_accueil):not(#page__en_construction).espace_club section > form > h3::after {
	display: none;
}
/*  Un second titre dans la même carte ouvre une partie : il s'en
    écarte, il ne se souligne pas davantage. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > h3 ~ h3 {
	margin-top: 30px;
}

/*  ----------------------------------------------------------------
    2. Un sous-titre est plus GROS que ce qu'il introduit
    ----------------------------------------------------------------

    « #page_compte section > h4 » habillait tout sous-titre en douze
    pixels et demi, capitales espacées, gris : sur l'écran des tarifs,
    « Lots de séances », « Paiement à la séance » et « Abonnements »
    se lisaient plus petit, plus gris et plus serré que les phrases
    qu'ils coiffent. Un surtitre se lit ainsi ; un sous-titre, non.

    Le surtitre existe toujours, et porte désormais un nom :
    « .surtitre_carte », employé là où il a un sens — la carte des
    alertes du tableau de bord.                                      */
body:not(#page_accueil):not(#page__en_construction).espace_club section h4:not(.surtitre_carte):not(.titre_chapitre):not(.btn_form):not(.titre_groupe_ecrans),
body:not(#page_accueil):not(#page__en_construction).espace_club .titre_section {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.005em;
	text-transform: none;
	color: var(--club-carte-texte, #141414);
	margin: 26px 0 8px;
}
/*  Le premier titre d'une carte reste le titre de la carte, quelle que
    soit sa balise : la règle du deuxième temps le pose déjà, et elle
    doit continuer de l'emporter sur celle-ci. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > h4:first-child,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .titre_bulle:first-child > h4 {
	font-size: 16.5px;
	margin: 0 0 14px;
}

/*  ----------------------------------------------------------------
    3. La prose : une mesure, et une seule taille
    ----------------------------------------------------------------

    Les paragraphes d'explication couraient sur les mille cent soixante
    pixels de la carte — une ligne de cent quatre-vingts caractères,
    où l'œil perd le début de la suivante — et se lisaient en onze,
    douze ou douze et demi selon l'endroit : trois tailles pour une
    même chose. Treize et demi partout, et soixante-dix caractères au
    plus, comme la planche.                                           */
body:not(#page_accueil):not(#page__en_construction).espace_club section .intro_reglage,
body:not(#page_accueil):not(#page__en_construction).espace_club section .aide_reglage,
body:not(#page_accueil):not(#page__en_construction).espace_club section > p:not(.btn):not(.center):not(.chapo_ecran) {
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 70ch;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section .aide_reglage,
body:not(#page_accueil):not(#page__en_construction).espace_club section .intro_reglage {
	display: block;
	color: var(--club-carte-doux, #5c5c6b);
	margin: 4px 0 0;
}
/*  Le chapô d'une carte : la phrase qui suit son titre. */
body:not(#page_accueil):not(#page__en_construction).espace_club section > h3 + p,
body:not(#page_accueil):not(#page__en_construction).espace_club section > h4 + p,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .titre_bulle + p {
	margin-top: -8px;
	margin-bottom: 20px;
	color: var(--club-carte-doux, #5c5c6b);
	max-width: 70ch;
}

/*  ----------------------------------------------------------------
    4. Un bouton d'envoi n'est pas un champ
    ----------------------------------------------------------------

    Le gabarit du produit se sert de « form » comme d'une grille : les
    « fieldset » y font cinquante pour cent de large et se rangent deux
    par deux. Le bouton d'envoi, posé en enfant direct du formulaire,
    entrait dans cette grille comme un champ de plus : sur « Inscrire
    un membre », « Inscrire ce membre » se retrouvait à droite de
    « Date de naissance », à la place du sixième champ ; sur « Réserver
    une séance », « Réserver » occupait toute la colonne de droite,
    sous « Créneau ».

    Il prend sa propre ligne — « flex-basis: 100% » force le retour —
    et garde sa largeur naturelle — « max-width: max-content ». C'est
    la place qu'un bouton occupe dans la planche retenue : au bout du
    formulaire, aligné sur son bord gauche.                           */
body:not(#page_accueil):not(#page__en_construction).espace_club section form > button,
body:not(#page_accueil):not(#page__en_construction).espace_club section form > .btn:not(.btn_block),
body:not(#page_accueil):not(#page__en_construction).espace_club section form > input[type="submit"] {
	flex: 0 0 100%;
	max-width: max-content;
	align-self: flex-start;
	margin: 20px 10px 0;
}

/*  ----------------------------------------------------------------
    5. Le rythme d'un champ
    ----------------------------------------------------------------

    L'intitulé collait à son champ, et le champ suivant collait au
    précédent : sur « Mon compte », douze champs se suivaient sans
    qu'on voie où finissait l'un et où commençait l'autre. Six pixels
    entre l'intitulé et son champ, dix-huit entre deux champs, et
    quarante pixels de haut — le plancher de ce qui se touche.       */
body:not(#page_accueil):not(#page__en_construction).espace_club section form fieldset {
	margin-bottom: 18px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section form fieldset label {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section form fieldset > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(#page_accueil):not(#page__en_construction).espace_club section form fieldset > select {
	min-height: 40px;
	padding-top: 9px;
	padding-bottom: 9px;
}
/*  Les champs d'un tableau d'administration gardent leur format serré :
    c'est ce qui fait tenir vingt lignes à l'écran. */
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin td form fieldset,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance td form fieldset {
	margin-bottom: 0;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin td form fieldset > input,
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin td form fieldset > select,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance td form fieldset > input,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance td form fieldset > select {
	min-height: 0;
	padding-top: 6px;
	padding-bottom: 6px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin td form > button,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance td form > button {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

/*  ----------------------------------------------------------------
    6. Un panneau dans une carte n'est pas une seconde carte
    ----------------------------------------------------------------

    « Réserver une séance » posait, DANS la carte blanche de l'écran,
    un second panneau blanc cerné d'un trait et barré à gauche d'un
    trait bleu de quatre pixels. Deux cadres blancs emboîtés, à vingt
    pixels l'un de l'autre, et une barre d'accent qui ne dit rien —
    le panneau n'est ni une alerte ni une citation, c'est le contenu
    de l'écran.

    Un panneau interne devient une surface : le fond très pâle du
    produit, pas de cerne, pas de barre, un rayon plus petit que celui
    de la carte qui le porte. La même règle vaut pour l'encart de
    « Mon solde » et pour le panneau déplié d'une ligne de liste.    */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation {
	/*  Rien du tout : ce panneau EST le contenu de la carte qui le
	    porte, et il n'y a rien d'autre sur l'écran. Une surface grise
	    dans une carte blanche, à vingt pixels de son bord, faisait un
	    second cadre pour délimiter… la carte elle-même. */
	background-color: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
/*  Le titre du panneau reprend la mesure d'un titre de carte : à vingt
    pixels il pesait plus lourd que le h1 de l'écran. */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation h4 {
	font-size: 16.5px;
	font-weight: 600;
	margin: 0 0 4px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation > p {
	font-size: 13.5px;
	max-width: 70ch;
}
/*  Un panneau posé dans un panneau reprend le blanc de la carte, pour
    que les deux surfaces ne se confondent pas. */
body:not(#page_accueil):not(#page__en_construction).espace_club .slide_form .encart,
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .encart {
	border: 0;
	background-color: var(--club-carte-fond, #fff);
	border-radius: max(0px, calc(var(--club-carte-arrondi, 16px) - 6px));
}

/*  ----------------------------------------------------------------
    7. L'en-tête d'un tableau
    ----------------------------------------------------------------

    « LIBELLÉ  SÉANCES  PRIX  ORDRE  EN VENTE » : capitales grasses,
    espacées, entre deux filets. C'est l'en-tête d'un tableur, pas
    d'une liste qu'on lit. Un libellé gris de douze pixels sur un seul
    filet bas suffit à dire ce que la colonne porte.                 */
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin th,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--club-carte-doux, #5c5c6b);
	border-top: 0;
	border-bottom: 1px solid var(--club-carte-trait, #e5e6eb);
	padding-bottom: 10px;
}

/*  ----------------------------------------------------------------
    8. « Réserver une séance », de bout en bout
    ---------------------------------------------------------------- */

/*  Les intitulés de ce formulaire étaient en capitales espacées, à la
    couleur du club : trois signaux — casse, espacement, couleur — pour
    dire « ceci est un intitulé », là où le reste du produit se contente
    de la graisse. Ils rentrent dans le rang.                          */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_calendrier label,
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_creneaux label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--club-carte-texte, #141414);
	margin: 0 0 6px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_calendrier #search_form_date {
	margin-top: 0;
	font-size: 14px;
	border-radius: 8px;
	border-color: var(--club-carte-trait, #e5e6eb);
}

/*  LE BOUTON ÉTAIT DANS LA COLONNE DES CRÉNEAUX.

    Posé dans la seconde colonne de la grille, sous la liste des
    créneaux, il en prenait toute la largeur : un bouton bleu plein de
    quatre cents pixels, à droite, qui se lisait comme le prolongement
    du champ au lieu de conclure le formulaire. Il passe sous les deux
    colonnes, à gauche, à sa largeur naturelle.                       */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_corps > .carte_reservation_creneaux > .btn,
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_corps > .carte_reservation_creneaux > button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	max-width: max-content;
	margin: 22px 0 0;
	padding: 12px 26px;
	font-size: 14px;
	min-height: 44px;
}

/*  Le panneau prend la largeur de la carte : borné à neuf cent vingt
    pixels dans une carte qui en fait mille cent soixante, il laissait
    un tiers de vide gris à sa droite.                                */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation {
	max-width: none;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_corps {
	max-width: 820px;
}

/*  Le bouton reprend l'alignement des champs : « btn_big » et
    « btn_center » le centraient dans sa colonne. */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_corps > .carte_reservation_creneaux > .btn,
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_reservation .carte_reservation_corps > .carte_reservation_creneaux > button.btn {
	margin-left: 0;
	margin-right: auto;
}

/*  ----------------------------------------------------------------
    9. L'en-tête d'une partie ne se souligne pas non plus
    ----------------------------------------------------------------

    entete_panneau() pose un filet pleine largeur sous le titre d'une
    partie, et un court trait de couleur dessus — la même enseigne que
    celle retirée des titres de carte, à un autre endroit. Sur
    « Tarifs », le filet paraissait SOUS le paragraphe d'explication :
    on lisait un titre, un texte, puis une ligne qui ne fermait rien.  */
body:not(#page_accueil):not(#page__en_construction).espace_club .panneau_entete {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 18px;
}
body:not(#page_accueil):not(#page__en_construction).espace_club .panneau_entete::after {
	display: none;
}

/*  ----------------------------------------------------------------
    10. Dix pixels, ce n'est pas du texte, c'est de la fine print
    ----------------------------------------------------------------

    Les explications du produit passent par « small », et « small »
    vaut douze pixels — souvent dix, une fois entré dans une balise qui
    en réduit encore la taille. Sur « Tarifs », les trois phrases qui
    expliquent ce qu'est un lot, une séance à l'unité et un abonnement
    se lisaient en dix pixels sous des titres de quatorze et demi : le
    texte le plus utile de l'écran était le plus petit.

    Douze et demi est le plancher de l'espace ; et un « small » qui
    fait à lui seul tout un paragraphe n'est pas une mention, c'est le
    texte : il prend treize et demi et la mesure de la prose.        */
body:not(#page_accueil):not(#page__en_construction).espace_club section small,
body:not(#page_accueil):not(#page__en_construction).espace_club section .small {
	font-size: 12.5px;
	line-height: 1.5;
}
body:not(#page_accueil):not(#page__en_construction).espace_club section p > small:only-child {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 70ch;
	color: var(--club-carte-doux, #5c5c6b);
}
/*  Dans un tableau, la mention sous une valeur reste une mention. */
body:not(#page_accueil):not(#page__en_construction).espace_club .tableau_admin td small,
body:not(#page_accueil):not(#page__en_construction).espace_club .table_seance td small {
	font-size: 12px;
}

/*  ----------------------------------------------------------------
    11. Le plancher de douze pixels, tenu partout
    ----------------------------------------------------------------

    Le produit se donne douze pixels pour plancher — c'est ce que
    vérifie outils/essai-telephone.php. La chrome du tutoriel y
    échappait encore : les familles du sommaire à dix et demi, son
    intitulé et celui de la recherche à onze et demi, le fil d'un
    chapitre à onze. Ce sont des étiquettes en capitales espacées, et
    à douze pixels elles se lisent toujours comme des étiquettes.    */
.sommaire_famille,
.colonne_sommaire .sommaire_titre,
.recherche_aide_titre,
.chapitre_famille {
	font-size: 12px;
}

/*  Les dernières étiquettes sous le plancher : le fil d'un chapitre du
    tutoriel, et le chemin d'un écran dans sa fiche. « note-fontsize-10 »
    reste : c'est le choix « 10 pixels » de l'éditeur de texte, offert au
    club, et il doit montrer ce qu'il annonce.                         */
.fil_chapitres .fil_sens,
.fiche_ecran .fiche_ecran_ou {
	font-size: 12px;
}

/* ========================================================================
   L'ASSISTANT DU CLUB : LA BULLE EN BAS À DROITE
   ========================================================================

   Le vocabulaire est celui des cartes de l'espace connecté — les mêmes
   jetons de fond, de trait, d'arrondi et d'ombre — pour que le panneau
   soit du même produit que l'écran qui le porte, et non un greffon posé
   par-dessus. Un club qui change sa couleur change aussi celle-ci.

   Elle vit aussi sur le site public, où ces jetons existent également :
   c'est la même feuille.                                                */

.ia_coin {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 940;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px; }

/* ---- La pastille ---- */

/* LA PASTILLE PASSE SOUS LE PANNEAU.

   Les deux sont dans une colonne, et la pastille vient la première
   dans le HTML — c'est elle qui commande le panneau, et le lecteur
   d'écran doit la rencontrer d'abord. À l'écran, elle doit rester en
   bas : posée au-dessus, elle remontait avec le panneau et venait se
   coller à la barre de navigation sur téléphone.

   LES DEUX PORTENT UN RANG, et non la seule pastille : un enfant sans
   « order » vaut zéro, c'est-à-dire AVANT tout rang positif. Numéroter
   le second seul aurait remis le premier devant. */
.ia_coin > .ia_panneau  { order: 1; }
.ia_coin > .ia_pastille { order: 2; }

.ia_pastille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--club-bouton, var(--club-principale, #39449f));
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: transform .16s ease, box-shadow .16s ease; }

.ia_pastille:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }

.ia_pastille:focus-visible {
  outline: 2px solid var(--club-principale, #39449f);
  outline-offset: 3px; }

.ia_pastille_icone {
  display: inline-flex; }

/* Ouvert, la pastille cesse de nommer l'assistant : le panneau porte
   son titre juste au-dessus, et deux fois le même mot à dix pixels
   d'écart ne dit rien de plus. */
.ia_ouvert .ia_pastille_dit {
  display: none; }

.ia_ouvert .ia_pastille {
  padding: 0;
  width: 48px;
  justify-content: center; }

/* ---- Le panneau ---- */

/* LE PANNEAU FERMÉ EST FERMÉ.

   « display: flex » ci-dessous l'emporte sur l'attribut « hidden », que
   le navigateur ne rend en « display: none » que par sa feuille à lui,
   la plus faible de toutes. Le panneau restait donc ouvert au
   chargement de chaque page, et Échap semblait ne rien faire : il
   posait bien l'attribut, qui ne décidait plus de rien. */
.ia_panneau[hidden] {
  display: none; }

.ia_panneau {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--club-carte-fond, #fff);
  color: var(--club-carte-texte, #1f1f1f);
  border: var(--club-carte-bordure, 0) solid var(--club-carte-trait, #e6e6e6);
  border-radius: var(--club-carte-arrondi, 16px);
  box-shadow: var(--club-carte-ombre, 0 12px 34px rgba(0, 0, 0, .16));
  overflow: hidden; }

.ia_entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--club-carte-trait, #e6e6e6); }

.ia_titre {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--club-carte-texte, #1f1f1f); }

.ia_sous {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--club-carte-doux, #6a6a6a); }

.ia_entete_boutons {
  display: flex;
  gap: 4px;
  flex: 0 0 auto; }

.ia_icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--club-carte-doux, #6a6a6a);
  font-size: 15px;
  line-height: 1;
  cursor: pointer; }

.ia_icone:hover {
  background: var(--club-carte-rayure, rgba(0, 0, 0, .05));
  color: var(--club-carte-texte, #1f1f1f); }

/* ---- Le fil ---- */

.ia_fil {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.ia_accueil {
  margin-top: 4px; }

.ia_bonjour {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--club-carte-doux, #6a6a6a); }

.ia_exemples {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start; }

/* Une suggestion est une proposition, pas une commande : elle remplit
   le champ et attend qu'on la relise. Son dessin le dit — un contour
   léger, pas le bouton plein qui envoie. */
.ia_exemple {
  max-width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: 1px solid var(--club-carte-trait, #e6e6e6);
  border-radius: 12px;
  background: transparent;
  color: var(--club-carte-texte, #1f1f1f);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer; }

.ia_exemple:hover {
  border-color: var(--club-principale, #39449f);
  color: var(--club-principale, #39449f); }

.ia_tour {
  display: flex;
  flex-direction: column;
  max-width: 88%; }

.ia_tour_question {
  align-self: flex-end;
  align-items: flex-end; }

.ia_tour_reponse {
  align-self: flex-start; }

.ia_bulle {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere; }

.ia_tour_question .ia_bulle {
  background: var(--club-bouton, var(--club-principale, #39449f));
  color: #fff;
  border-bottom-right-radius: 5px;
  white-space: pre-wrap; }

.ia_tour_reponse .ia_bulle {
  background: var(--club-carte-rayure, #f4f4f6);
  color: var(--club-carte-texte, #1f1f1f);
  border-bottom-left-radius: 5px; }

.ia_panne .ia_bulle {
  background: var(--club-alerte-fond, #fbeaea);
  color: var(--club-alerte, #a32b2b); }

.ia_bulle p {
  margin: 0 0 8px; }

.ia_bulle p:last-child {
  margin-bottom: 0; }

.ia_bulle h4 {
  margin: 12px 0 5px;
  font-size: 13.5px;
  font-weight: 600; }

.ia_bulle h4:first-child {
  margin-top: 0; }

.ia_bulle ul {
  margin: 0 0 8px;
  padding-left: 18px; }

.ia_bulle ul:last-child {
  margin-bottom: 0; }

.ia_bulle li {
  margin-bottom: 3px; }

/* D'où sort le chiffre. Discret, sous la réponse — mais pas sous le
   plancher : le produit ne descend pas sous 12px, et l'essai du
   téléphone le vérifie. */
.ia_source {
  margin: 5px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--club-carte-doux, #6a6a6a);
  font-style: italic; }

/* ---- L'attente ---- */

.ia_attend .ia_bulle {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px; }

.ia_point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--club-carte-doux, #6a6a6a);
  animation: ia_respire 1.2s infinite ease-in-out; }

.ia_point:nth-child(2) { animation-delay: .18s; }
.ia_point:nth-child(3) { animation-delay: .36s; }

@keyframes ia_respire {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); } }

/* ---- La saisie ---- */

.ia_saisie {
  display: flex;
  /* LE BOUTON RESTE À CÔTÉ DU CHAMP.

     Le gabarit du produit se sert de « form » comme d'une grille et
     lui pose « flex-wrap: wrap ». Ici, il n'y a qu'une ligne : sur
     téléphone, le champ prenait la largeur entière et « Envoyer »
     tombait à la ligne suivante, centré, à cinquante pixels du
     clavier. */
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 0;
  border-top: 1px solid var(--club-carte-trait, #e6e6e6); }

.ia_saisie textarea {
  flex: 1 1 auto;
  /* Sans cela, la largeur minimale d'un élément de flex est celle de
     son contenu : le champ refusait de descendre sous sa mesure
     naturelle et poussait le bouton hors de la ligne. */
  min-width: 0;
  min-height: 40px;
  max-height: 130px;
  padding: 10px 12px;
  border: 1px solid var(--club-carte-trait, #e6e6e6);
  border-radius: 12px;
  background: var(--club-carte-fond, #fff);
  color: var(--club-carte-texte, #1f1f1f);
  font-family: inherit;
  /* 16px : en dessous, l'iPhone zoome au premier appui dans le champ,
     et la page reste agrandie une fois le clavier refermé. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto; }

.ia_saisie textarea:focus {
  outline: 0;
  border-color: var(--club-principale, #39449f); }

.ia_envoyer {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  font-size: 13.5px; }

.ia_envoyer[disabled] {
  opacity: .55;
  cursor: default; }

.ia_pied {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--club-carte-doux, #6a6a6a); }

.ia_pied_note {
  display: block; }

/* ---- Sur téléphone ----

   Le panneau prend l'écran, moins une gouttière. Un panneau de 400px
   posé sur un écran de 360 débordait à droite, et la pastille avec
   lui. */

@media screen and (max-width: 560px) {
  .ia_coin {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: flex-end; }

  /* LA BARRE DU CLUB RESTE VISIBLE.

     Le panneau prenait tout sauf cent pixels, et la colonne qui le
     porte compte aussi la pastille et deux gouttières : son bord haut
     tombait à vingt-huit pixels, en plein milieu de la barre de
     navigation, dont il coupait le logo et le bouton « Menu ». Cent
     soixante-dix pixels laissent la barre entière au-dessus.

     « dvh » plutôt que « vh » sur la seconde ligne : sur téléphone, la
     barre d'adresse du navigateur mange une partie de « vh », et le
     bas du panneau — c'est-à-dire le champ de saisie — passait sous
     elle. */
  .ia_panneau {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px); }

  .ia_pastille {
    min-height: 48px; } }

@media (prefers-reduced-motion: reduce) {
  .ia_pastille { transition: none; }
  .ia_point    { animation: none; } }

/* ------------------------------------------------------------------
   L'HISTORIQUE DE L'ASSISTANT
   ------------------------------------------------------------------

   Un transcript n'est pas une conversation en cours : il se parcourt
   plus qu'il ne se lit, et sur toute la largeur de l'écran. Les bulles
   du panneau seraient ici une gêne — trois cents pixels de large au
   milieu d'une page qui en fait mille. Les messages s'alignent donc à
   plat, distingués par un filet de couleur à gauche.                 */

.ligne_active > td {
  background: var(--club-carte-rayure, #f4f4f6); }

.ia_archive {
  margin: 0 0 14px;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--club-carte-trait, #e6e6e6); }

.ia_archive_question {
  border-left-color: var(--club-principale, #39449f); }

.ia_archive_panne {
  border-left-color: var(--club-alerte, #a32b2b); }

.ia_archive_qui {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--club-carte-doux, #6a6a6a); }

.ia_archive_texte {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 70ch; }

.ia_archive_outils {
  margin-top: 7px; }

.ia_archive_outils > summary {
  font-size: 12.5px;
  color: var(--club-principale, #39449f);
  cursor: pointer; }

.ia_archive_outil {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--club-carte-rayure, #f4f4f6); }

.ia_archive_outil_nom {
  margin: 0;
  font-size: 13px;
  font-weight: 600; }

.ia_archive_outil_arg {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--club-carte-doux, #6a6a6a); }

/* Ce qu'un outil a rendu part sur cinquante lignes : il défile dans sa
   boîte, et ne pousse pas la page en largeur. */
.ia_archive_outil_sortie {
  margin: 6px 0 0;
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--club-carte-texte, #1f1f1f); }

/* ========================================================================
   LE SECONDAIRE DOIT GAGNER SUR L'ORDINAIRE
   ========================================================================

   « .btn_grey » est déclaré à la ligne 729 de cette feuille, et
   « .btn » à la ligne 6759. Même poids — une classe chacun — et c'est
   donc le dernier écrit qui l'emporte : le fond du bouton ordinaire
   recouvrait celui du secondaire, partout, depuis toujours.

   Ce qui se voyait : les quatre pages publiques offraient « Accéder à
   mon compte » et « S'inscrire » côte à côte, tous deux pleins, de la
   même couleur, de la même taille. Deux appels à l'action qui se
   valent n'en font aucun : le visiteur qui hésite entre se connecter
   et s'inscrire n'était pas aidé.

   « .btn_grey » reprend le dessin du secondaire du produit — le trait
   de la couleur du club sur fond de carte — au lieu de l'encre de la
   page, qui est un noir et n'appartient pas à la palette.            */

.btn.btn_grey,
button.btn.btn_grey,
a.btn.btn_grey {
  background: var(--club-carte-fond, #fff);
  color: var(--club-principale, #39449f);
  border: 1px solid var(--club-principale-claire, #c8cbe4); }

.btn.btn_grey:hover, .btn.btn_grey:focus,
button.btn.btn_grey:hover, button.btn.btn_grey:focus,
a.btn.btn_grey:hover, a.btn.btn_grey:focus {
  background: var(--club-principale-claire, #c8cbe4);
  color: var(--club-principale-fonce, #2b3377);
  border-color: var(--club-principale-claire, #c8cbe4); }

/* ------------------------------------------------------------------ */
/*  La barre rangée comme la planche : la personne à droite, le club   */
/*  sous son volet. Les entrées marquées « menu_perso » et             */
/*  « menu_club » restent dans la liste pour la pile du téléphone et   */
/*  les pages sans script ; la barre seule les masque.                 */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 1001px) {
  .barre_haute .menu_barre .sous_menu > li.menu_perso,
  .barre_haute .menu_barre .sous_menu > li.menu_club { display: none; }
}

/* Les volets sont des <details> : le triangle du navigateur n'a pas
   sa place sur une pastille ni sur une entrée de barre. */
details.volet_barre > summary { list-style: none; cursor: pointer; }
details.volet_barre > summary::-webkit-details-marker { display: none; }
details.volet_barre > summary::marker { content: ""; }

/* Le volet de la personne : la pastille l'ouvre, le panneau s'aligne
   sur le bord droit de la barre. */
.bout_barre details.volet_moi { position: relative; }
.bout_barre details.volet_moi > .volet_liste {
  right: 0;
  left: auto;
  min-width: 230px;
}
.bout_barre details.volet_moi[open] > summary.pastille_moi {
  background: var(--club-carte-rayure, #E3E2EC);
  color: var(--club-espace-texte, #141414);
}

/* Qui est là, en tête de volet : le nom que la pastille abrège. */
.volet_liste li.volet_qui {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px 9px;
  border-bottom: 1px solid var(--club-ligne, #e5e6eb);
  margin-bottom: 4px;
}
.volet_liste .volet_nom {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--club-texte, #161a2e);
}
.volet_liste .volet_role {
  font-size: 12px;
  color: var(--club-texte-doux, #616371);
}

/* Un filet sépare ce qui change de registre : la configuration de
   l'hébergeur, puis la sortie. */
.volet_liste li.volet_filet {
  border-top: 1px solid var(--club-ligne, #e5e6eb);
  margin-top: 4px;
  padding-top: 4px;
}

/* La sortie du volet est un formulaire : son bouton s'habille comme
   les entrées qui l'entourent. */
.volet_liste form { margin: 0; }
.volet_liste form .lien_menu { width: 100%; }

/* « Le club » : une entrée de barre qui s'ouvre, chevron compris. */
.menu_barre .sous_menu li.volet_club { position: relative; }
.menu_barre .sous_menu li.volet_club > details > summary.lien_menu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.menu_barre .sous_menu li.volet_club > details > summary.lien_menu svg {
  flex-shrink: 0;
  opacity: .65;
  transition: transform .15s ease;
}
.menu_barre .sous_menu li.volet_club > details[open] > summary.lien_menu svg {
  transform: rotate(180deg);
}
.menu_barre .sous_menu li.volet_club > details > .volet_liste {
  left: 0;
  right: auto;
}

@media screen and (max-width: 1000px) {
  /* La pile du téléphone montre les entrées à plat, sous leurs titres
     de section : le volet « Le club » ferait double emploi. */
  .barre_haute .menu_barre .sous_menu > li.volet_club { display: none; }
  /* La pastille reste, et son volet aussi : c'est le chemin court vers
     la sortie sans déplier tout le menu. */
  .bout_barre details.volet_moi > .volet_liste { max-width: calc(100vw - 36px); }
}

/* Les entrées du volet de la personne s'habillent comme celles des
   autres panneaux : le volet vit hors de la barre de navigation, et
   les règles de « .menu_barre .sous_menu » ne l'atteignent pas. */
.bout_barre .volet_liste a,
.bout_barre .volet_liste button.lien_menu {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--club-texte-doux, #616371);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.bout_barre .volet_liste a:hover,
.bout_barre .volet_liste a:focus-visible,
.bout_barre .volet_liste button.lien_menu:hover,
.bout_barre .volet_liste button.lien_menu:focus-visible {
  background: var(--club-surface-page, #f7f8fb);
  color: var(--club-texte, #161a2e);
}
.bout_barre .volet_liste a[aria-current="page"] {
  background: var(--club-principale-claire, #eef0f9);
  color: var(--club-principale-fonce, #232c6b);
  font-weight: 500;
}

/* La bande d'invitation des pages publiques : une phrase, deux
   pastilles à leur taille — les deux pavés pleine largeur recopiés
   par quatre pages n'ont plus cours. Elle vit hors de toute carte. */
.bande_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 30px auto 8px;
  text-align: center;
}
.bande_cta_mot {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--club-texte, #161a2e);
  max-width: 56ch;
}
.bande_cta_boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.bande_cta .btn { min-width: 0; margin: 0; }
@media (max-width: 640px) {
  .bande_cta_boutons { width: 100%; flex-direction: column; }
  .bande_cta .btn { width: 100%; }
}

/* Les albums de la galerie : la vignette au-dessus, le nom dessous.
   L'ancien dessin gravait un titre en italique dans un voile sombre,
   derrière un trait à la couleur d'accent — rien d'autre dans le
   produit ne parle comme ça. */
ul.grille_albums { list-style: none; margin: 0; padding: 0; }
.tuile_album > a {
  display: flex;
  flex-direction: column;
  border-radius: var(--club-carte-arrondi, 16px);
  background: var(--club-fond, #fff);
  border: var(--club-carte-bordure, 0) solid var(--club-carte-trait, #e5e6eb);
  box-shadow: var(--club-carte-ombre, 0 1px 2px rgba(22, 26, 46, .06));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.tuile_album > a:hover,
.tuile_album > a:focus-visible {
  box-shadow: 0 2px 4px rgba(22, 26, 46, .08), 0 14px 32px -16px rgba(22, 26, 46, .28);
  transform: translateY(-2px);
}
.album_visuel {
  display: block;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background-color: var(--club-surface-page, #f2f3f7);
  background-size: cover;
  background-position: center;
}
.album_ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.album_nom { font-size: 14.5px; font-weight: 600; color: var(--club-texte, #161a2e); }
.album_compte { font-size: 12.5px; color: var(--club-texte-doux, #616371); white-space: nowrap; }

/* La carte d'un formulaire public seul en scène — mot de passe oublié,
   consentement, désinscription : la carte de l'espace, centrée, à
   largeur de lecture. */
form.carte_publique,
.carte_publique {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 28px;
  background: var(--club-fond, #fff);
  border: var(--club-carte-bordure, 0) solid var(--club-carte-trait, #e5e6eb);
  border-radius: var(--club-carte-arrondi, 16px);
  box-shadow: var(--club-carte-ombre, 0 1px 2px rgba(22, 26, 46, .06), 0 10px 28px -18px rgba(22, 26, 46, .24));
}

/* ==================================================================== */
/*  La revue écran par écran : ce que chaque page devait encore à la    */
/*  planche. Chaque bloc nomme son écran ; les règles transverses       */
/*  ouvrent la marche.                                                  */
/* ==================================================================== */

/* ---- La bulle de l'assistant ne recouvre plus la page ---- */

/* Elle flotte au coin, et les dernières lignes de chaque écran long
   passaient dessous : la page réserve la place qu'elle occupe. */
body:has(.ia_coin) main#principal { padding-bottom: 92px; }

/* Sur téléphone, la règle historique met tout bouton à pleine largeur :
   la pastille de l'assistant devenait une barre posée sur le contenu.
   Elle reste une pastille. */
@media (max-width: 640px) {
  button.ia_pastille { width: auto; }
}
@media (max-width: 560px) {
  body:has(.ia_coin) main#principal { padding-bottom: 104px; }
}

/* ---- Les champs de l'espace ont une seule peau ---- */

/* La fiche d'un membre peignait ses champs en gris de surface, les
   autres formulaires en blanc : deux peaux pour le même objet. Le champ
   qui s'écrit est blanc ; ce qui ne s'écrit pas (désactivé, lecture
   seule) garde son voile. */
#page_compte form fieldset input:not([type="checkbox"]):not([type="radio"]):not(:disabled):not([readonly]),
#page_compte form fieldset select:not(:disabled),
#page_compte form fieldset textarea:not(:disabled):not([readonly]) {
  background-color: var(--club-fond, #fff);
}

/* ---- Les étiquettes/valeurs de la fiche tiennent leurs colonnes ---- */

/* « Adresse » à gauche, la valeur à droite — et la valeur qui passait
   à la ligne revenait sous l'étiquette : « Belgique » se lisait comme
   un intitulé. Deux colonnes déclarées, la valeur enveloppe dans la
   sienne. */
.bloc_fiche > p:has(> b:first-child) {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
}
.bloc_fiche > p:has(> b:first-child) > b { font-weight: 600; }

/* ---- Feuille de séance : la carte d'un inscrit hiérarchise ---- */

/* Le nom et le téléphone se lisaient du même bleu, à la même force :
   deux liens jumeaux. Le nom porte, le téléphone accompagne. */
.carte_inscrit .carte_nom { font-size: 13.5px; }
.carte_inscrit .carte_tel { font-size: 12px; }
/* Le préfixe reprend celui de la règle de prose de l'espace, qui
   rendait sinon les deux liens du même bleu. */
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_inscrit .carte_nom a {
  color: var(--club-texte, #161a2e);
}
body:not(#page_accueil):not(#page__en_construction).espace_club .carte_inscrit .carte_tel a {
  color: var(--club-texte-doux, #616371);
}

/* Le cadre autour de la grille des inscrits cernait des cartes déjà
   cernées : un cadre dans un cadre. La grille respire sans lui. */
.inscrits.grille_inscrits {
  border: 0;
  padding: 0;
  background: transparent;
}

/* ---- Les paiements du club : une ligne par paiement ---- */

/* Le moyen et la date descendaient chacun à la ligne : quarante
   paiements faisaient cent vingt lignes. Sur grand écran, tout tient
   sur une seule ; le téléphone garde l'empilement. */
@media (min-width: 761px) {
  #page_compte .ligne_paiement {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    column-gap: 14px;
    align-items: center;
  }
  #page_compte .ligne_paiement .nom_paiement { grid-column: auto; order: 0; }
  #page_compte .ligne_paiement .date_paiement,
  #page_compte .ligne_paiement .moyen_paiement { grid-column: auto; text-align: right; }
}

/* ---- Le journal : la ligne d'un événement ---- */

.ligne_journal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: left;
}
.ligne_journal .nom_journal { font-weight: 600; }
.ligne_journal .date_journal {
  margin-left: auto;
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 12px;
  color: var(--club-texte-doux, #616371);
}

/* ---- Assurés par mois : la vente n'est pas une alerte ---- */

/* Les barres du chiffre de vente se peignaient du roux de l'alerte :
   une recette n'est pas un danger. Elles prennent l'accent du club,
   comme toute donnée qui ne juge pas. */
.jauge_pleine_vente { background: var(--club-principale, #39449f); }

/* ---- Mes commandes : les colonnes s'alignent sur ce qu'elles portent ---- */

.tableau_commandes th { text-align: left; }
.tableau_commandes th:nth-child(4),
.tableau_commandes td[data-intitule="Montant"] { text-align: right; }
.tableau_commandes td[data-intitule="Montant"] {
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-variant-numeric: tabular-nums;
}

/* ---- Réserver : le bouton s'aligne sur les champs ---- */

#page_compte .carte_reservation form > button.btn,
#page_compte .carte_reservation form > .btn {
  margin-left: 0;
  margin-right: auto;
}

/* ---- Le compte pour un virement se présente ---- */

.coordonnees_virement {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--club-surface-page, #f4f5fb);
  border: 1px solid var(--club-ligne, #e5e6eb);
  border-radius: 10px;
  font-size: 13.5px;
}
.coordonnees_virement .virement_pour {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--club-texte-doux, #616371);
}
.coordonnees_virement .virement_iban {
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  white-space: nowrap;
}

/* ---- Les événements : des blocs de carte, plus des panneaux gris ---- */

.events_page .slide_form,
.events_page .slide_form.actif {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.events_page > div + div {
  border-top: 1px solid var(--club-ligne, #e5e6eb);
  margin-top: 22px;
  padding-top: 22px;
}
.evenement_nom {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--club-texte, #161a2e);
}
.evenement_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--club-texte-doux, #616371);
}
.evenement_meta .evenement_quand {
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  color: var(--club-texte, #161a2e);
}
.evenement_meta .evenement_prix {
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-weight: 600;
  color: var(--club-principale-fonce, #232c6b);
}

/* ---- La boutique : la carte d'un produit, dans la langue du produit ---- */

/* La tuile gardait le bandeau noir du gabarit d'origine et un bouton en
   capitales cerné d'un double trait. Elle devient la carte du système :
   le visuel, le nom, la description, le prix en chasse fixe, et une
   pastille. */
.eshop_entete {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 6px;
}
.list_produits li a {
  border-radius: var(--club-carte-arrondi, 16px);
  border: var(--club-carte-bordure, 0) solid var(--club-carte-trait, #e5e6eb);
  box-shadow: var(--club-carte-ombre, 0 1px 2px rgba(22, 26, 46, .06), 0 10px 28px -18px rgba(22, 26, 46, .24));
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.list_produits li a:hover,
.list_produits li a:focus {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(22, 26, 46, .08), 0 14px 32px -16px rgba(22, 26, 46, .28);
}
.list_produits li a h5 {
  order: 2;
  background: transparent;
  color: var(--club-texte, #161a2e);
  text-align: left;
  padding: 12px 14px 0;
  font-size: 15px;
  font-weight: 600;
}
.list_produits li a .img { order: 1; }
.list_produits li a .desc { order: 3; color: var(--club-texte-doux, #616371); }
.list_produits li a .prix {
  order: 4;
  text-align: left;
  padding: 6px 14px 0;
  font-family: var(--club-chiffres, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 17px;
  font-weight: 600;
  color: var(--club-texte, #161a2e);
}
/* La règle de prose de l'espace — « section span : couleur héritée »,
   armée de ses deux :not(#…) — repeignait ce texte de la couleur du
   lien, bleu sur bleu : la pastille se lisait vide. Le sélecteur
   reprend le même préfixe pour peser un cran de plus. */
body:not(#page_accueil):not(#page__en_construction).espace_club .list_produits li a .btn_buy,
#page_compte .list_produits li a .btn_buy,
.list_produits li a .btn_buy {
  order: 5;
  margin: 12px 14px 0;
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--club-bouton, var(--club-principale, #39449f));
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.list_produits li a .btn_buy:after { display: none; content: none; }

/* Le panier est une pastille claire, plus un pictogramme nu. */
#panier > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--club-ligne, #e5e6eb);
  border-radius: 999px;
  background: var(--club-fond, #fff);
  cursor: pointer;
}
#panier > button:hover,
#panier > button:focus-visible { background: var(--club-surface-page, #f7f8fb); }

/* ----------------------------------------------------------------
   Réserver une séance : la place qui ne peut pas se régler.

   Le constat (« Solde épuisé ») est un .recap_complet comme « Rythme
   atteint » ; sous lui, le geste qui lève l'empêchement — prendre des
   séances ou un abonnement — est un bouton, pas une phrase. Il reprend
   la pilule du produit ; seule sa marge le sépare du constat.
   ---------------------------------------------------------------- */
.recap_achats { margin: 14px 0 4px; }
.recap_achats .btn { margin: 0; }

/* ----------------------------------------------------------------
   Les cinquante-cinq conseils : ce que les écrans ont gagné.

   Un bloc par famille, dans l'ordre des écrans. Chaque règle sert un
   composant posé par la revue « conseille-moi cinq améliorations » ;
   les composants existants (pastilles, cartes, barres) sont réemployés
   tels quels, seules leurs nouvelles situations s'écrivent ici.
   ---------------------------------------------------------------- */

/* Tableau de bord : les zéros s'éteignent, le créneau creux a son
   geste, le téléphone est sur la ligne, la date se dit vécue. */
.chiffre_eteint b,
.chiffre_eteint span { opacity: 0.45; }
.geste_creneau { display: inline-block; margin-left: 10px; font-size: 12.5px; white-space: nowrap; }
.tel_ligne { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.quand_relatif { color: #6a6f7a; font-size: 12.5px; margin-right: 6px; }

/* Les réservations : la légende gagne l'orange, la séance creuse se
   voit, les deux recherches se rangent côte à côte. */
.jauge_temoin_creux { background-color: var(--club-attention, #8a5a08); }
.entete_seance .btn_form.seance_creuse::after { background-color: var(--club-attention, #8a5a08); }
.recherches_seances { display: flex; gap: 20px 32px; flex-wrap: wrap; align-items: flex-end; }
.recherches_seances .form_recherche_seance { flex: 1 1 320px; }
.sous_titre_form { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6a6f7a; margin: 0 0 12px; text-align: center; }

/* Les membres : la légende filtre. Le repère garde sa forme ; l'état
   actif s'encadre comme les pilules de tri. */
.legende_filtrante li { padding: 0; }
.filtre_venue { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid transparent; color: inherit; text-decoration: none; }
.filtre_venue:hover { border-color: var(--club-ligne, #e5e6eb); }
.filtre_venue.actif { border-color: var(--club-principale, #2c3e91);
  background: var(--club-surface-page, #f4f5fb); font-weight: 600; }
.filtre_venue_reset { text-decoration: underline; }

/* Paiements : l'année à côté du mois, les intercalaires, la grille où
   le présent ressort et où les zéros s'éteignent, les gestes du
   panneau, les attentes anciennes repliées. */
.annee_encaissee { color: #6a6f7a; font-weight: 400; }
.mois_separateur { margin: 22px 0 8px; font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6a6f7a; }
.mois_separateur:first-of-type { margin-top: 4px; }
.totaux_mois .mois_vide { opacity: 0.4; }
.totaux_mois .mois_actuel { outline: 1px solid var(--club-principale, #2c3e91);
  outline-offset: 2px; border-radius: 6px; }
.actions_paiement { display: flex; gap: 10px; flex-wrap: wrap; }
.attentes_anciennes { margin: 6px 0 0; }
.attentes_anciennes summary { cursor: pointer; font-size: 13.5px;
  color: #6a6f7a; padding: 6px 0; }
.attente_ancienne { font-size: 13.5px; margin: 6px 0; }

/* Emailing : la nature du message en tête, la barre de genres centrée,
   la ligne d'un lot. */
.fieldset_nature_envoi .choix_licence { flex-wrap: wrap; }
.barre_tri_centre { justify-content: center; }
.ligne_lot td { background: var(--club-surface-page, #f7f8fb); }

/* Historique : le détail sous la ligne, sans panneau. La carte est
   une grille (héritée de la pastille « Ouvrir » des membres) : la
   ligne et son détail l'occupent en entier, l'un sous l'autre. */
.list_form > .ligne_journal,
.list_form > .journal_detail { grid-column: 1 / -1; }
.ligne_journal a { color: inherit; }
.ligne_journal:has(+ .journal_detail) { border-bottom: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#page_compte section p.journal_detail,
.journal_detail { margin: 0; padding: 2px 16px 10px; font-size: 13.5px; max-width: none; width: auto;
  color: #6a6f7a; background: var(--club-fond, #fff);
  border: 1px solid var(--club-ligne, #e2e2e2); border-top: 0;
  border-radius: 0 0 var(--club-arrondi, 4px) var(--club-arrondi, 4px); }

/* Le site : le sommaire dit son rang, se colle, et marque le volet. */
.sommaire_volets { position: sticky; top: 0; z-index: 30;
  background: var(--club-surface-page, #f4f5fb); padding-block: 10px;
  border-bottom: 1px solid var(--club-ligne, #e5e6eb); }
.sommaire_admin_mot { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #6a6f7a; margin-right: 4px; }
body:not(#page_accueil):not(#page__en_construction).espace_club .sommaire_volets a.actif,
#page_compte .sommaire_volets a.actif,
.sommaire_volets a.actif { background: var(--club-principale, #2c3e91); color: #fff; }
.sommaire_volets .sommaire_ailleurs { font-style: italic; }
.outils_export { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.outils_export .btn { margin: 0; }

/* Tutoriel : le plan se filtre et se coche, le lien se copie, les
   étapes de la mise en route se cochent. */
.colonne_sommaire_tutoriel { position: sticky; top: 16px; align-self: start;
  max-height: calc(100vh - 32px); overflow-y: auto; }
.filtre_plan { width: 100%; margin: 0 0 10px; }
.colonne_sommaire_tutoriel a.chapitre_lu::after { content: ' ✓';
  color: var(--club-secondaire, #0a7d62); }
.copier_chapitre { border: 0; background: none; padding: 0; margin: -6px 0 14px;
  color: var(--club-principale, #2c3e91); text-decoration: underline; cursor: pointer;
  font-size: 13px; }
.case_etape { margin-right: 8px; }
.etape_faite { opacity: 0.55; text-decoration: line-through; }

/* Réserver une séance : l'agenda des prochaines séances. */
.agenda_reservation { margin-bottom: 24px; }
.agenda_reservation h4 { margin-bottom: 12px; }
.cartes_creneaux { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.carte_creneau { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--club-ligne, #e5e6eb); border-radius: 12px;
  background: var(--club-fond, #fff); color: inherit; text-decoration: none; }
.carte_creneau:hover, .carte_creneau:focus-visible {
  border-color: var(--club-principale, #2c3e91); }
.carte_creneau_complete { opacity: 0.6; }
.creneau_jour { font-size: 13px; color: #6a6f7a; }
.creneau_heure { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 17px; }
.creneau_nom { font-size: 14px; }
.autre_date_titre { margin-bottom: 8px; }

/* Mon compte : les deux groupes du formulaire, l'affiliation en état. */
.groupe_form { width: 100%; margin: 18px 0 4px; padding-bottom: 6px; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #6a6f7a;
  border-bottom: 1px solid var(--club-ligne, #e5e6eb); }
.groupe_form:first-of-type { margin-top: 0; }
.ligne_affiliation { margin: 6px 0; }
.ligne_affiliation .etiquette_groupe { display: block; margin-bottom: 6px; }
.ligne_affiliation p { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; }

/* Mes séances : le dossier en une ligne, les passées repliées. */
.dossier_pli > summary { list-style: none; cursor: pointer; display: flex;
  gap: 14px; align-items: center; flex-wrap: wrap; }
.dossier_pli > summary::-webkit-details-marker { display: none; }
.dossier_pli > summary::after { content: '▾'; margin-left: auto;
  color: #6a6f7a; }
.dossier_pli[open] > summary::after { content: '▴'; }
.dossier_pli[open] > summary { margin-bottom: 14px; }
.dossier_pli_titre { font-weight: 700; }
.dossier_avancement_min { flex: 0 1 160px; min-width: 90px; margin: 0; }
.dossier_pli_reste { font-size: 13.5px; color: #6a6f7a; }
.dossier_pli .titre_bulle h3 { display: none; }
.seances_passees { margin-top: 18px; }
.seances_passees summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.seances_passees summary small { color: #6a6f7a; font-weight: 400; }
.seance_passee_ligne { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin: 8px 0; font-size: 14px; }

/* Sur un téléphone, le sommaire du tutoriel redevient un bloc du flux
   (collé, il couvrirait le chapitre) et le sommaire du Site s'aère. */
@media (max-width: 1000px) {
  .colonne_sommaire_tutoriel { position: static; max-height: none; }
}

/* Les deux gestes du visiteur — se connecter, devenir membre — rendus
   en boutons au bout de la barre du site, comme sur la vitrine de
   l'accueil. Le repli « Plus » ne les avale pas : main.js les saute.

   La géométrie se règle ici ; les couleurs, dessous, sous le préfixe
   de l'espace : la barre haute peint ses liens depuis un bloc à deux
   pseudo-identifiants, qu'aucune classe seule ne peut dépasser. */
.menu_barre .sous_menu li.menu_plus + li.menu_action { margin-left: auto; }
.menu_barre .sous_menu li.menu_action + li.menu_action { margin-left: 8px; }
.menu_barre .sous_menu li.menu_action a {
  padding: 8px 18px;
  border-radius: var(--club-bouton-arrondi, 40px);
  font-weight: 600;
  white-space: nowrap; }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_creux {
  color: var(--club-barre-fort, #161a2e);
  box-shadow: inset 0 0 0 1.5px var(--club-barre-trait, #d8d9e0);
  background: transparent; }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_creux:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_creux:focus-visible {
  color: var(--club-principale, #39449f);
  box-shadow: inset 0 0 0 1.5px var(--club-principale, #39449f);
  background: transparent; }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_plein {
  background: var(--club-bouton, var(--club-principale, #39449f));
  color: var(--club-bouton-texte, #fff); }
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_plein:hover,
body:not(#page_accueil):not(#page__en_construction).espace_club header.left_header.barre_haute .menu_barre .sous_menu li.menu_action a.menu_action_plein:focus-visible {
  background: var(--club-principale-fonce, #2b3377);
  color: var(--club-bouton-texte, #fff); }

/* La note à la gérance sur une page publique : elle seule la voit,
   posée comme un repère discret, pas comme un contenu du site. */
.note_gerance_page {
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--club-principale-claire, #c8cbe4);
  background: var(--club-surface-page, #f7f8fb);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: var(--club-texte-doux, #616371); }

/* Dans la colonne héritée, les mêmes gestes en boutons pleins et
   centrés, détachés de la pile des liens. */
.menu_colonne .sous_menu li.menu_action { margin-top: 10px; }
.menu_colonne .sous_menu li.menu_action + li.menu_action { margin-top: 8px; }
.menu_colonne .sous_menu li.menu_action a {
  text-align: center;
  border-radius: var(--club-bouton-arrondi, 40px);
  font-weight: 600; }
.menu_colonne .sous_menu li.menu_action a.menu_action_creux {
  box-shadow: inset 0 0 0 1.5px var(--club-ligne, #d8d9e0); }
.menu_colonne .sous_menu li.menu_action a.menu_action_plein {
  background: var(--club-bouton, var(--club-principale, #39449f));
  color: var(--club-bouton-texte, #fff); }
.menu_colonne .sous_menu li.menu_action a.menu_action_plein:hover,
.menu_colonne .sous_menu li.menu_action a.menu_action_plein:focus-visible {
  background: var(--club-principale-fonce, #2b3377);
  color: var(--club-bouton-texte, #fff); }

/* Dans la pile repliée du téléphone, les deux boutons d'action se
   détachent des liens et se centrent : ce sont eux que le pouce vient
   chercher. */
@media screen and (max-width: 1000px) {
  .barre_haute .menu_barre .sous_menu li.menu_plus + li.menu_action { margin-left: 0; margin-top: 10px; }
  .barre_haute .menu_barre .sous_menu li.menu_action + li.menu_action { margin-left: 0; margin-top: 8px; }
  .barre_haute .menu_barre .sous_menu li.menu_action a { text-align: center; }
}

/* Le surtitre de carte reste un surtitre — douze pixels, capitales
   espacées, gris — quelle que soit la casse que le club règle pour ses
   titres : c'est un repère de lecture, pas un titre. Réaffirmé ici
   parce que le bloc de l'espace repeint h1-h6 sous deux
   pseudo-identifiants, que la règle d'origine ne dépassait pas. */
body:not(#page_accueil):not(#page__en_construction).espace_club section h4.surtitre_carte,
body:not(#page_accueil):not(#page__en_construction).espace_club section > .titre_bulle_surtitre:first-child > h4.surtitre_carte {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* L'éditeur de texte riche garde sa barre d'outils : la règle héritée
   « button { width: 100% } » sous 1080 pixels empilait B, I, U, S en
   boutons pleine largeur, une lettre par ligne, sur trois écrans de
   téléphone. Les boutons de la barre reprennent leur taille. */
@media (max-width: 1080px) {
  .note-editor button, .note-editor .note-btn { width: auto; }
}

/* Emailing sur téléphone : les deux natures de message tiennent dans
   l'écran. Le libellé long gardait le nowrap des pilules d'un jour et
   poussait la page de vingt pixels ; il se plie, et chaque pilule
   prend sa ligne. */
@media (max-width: 600px) {
  .fieldset_nature_envoi .choix_licence label,
  .fieldset_nature_envoi .choix_licence .choix_jour,
  .fieldset_nature_envoi .choix_licence .choix_jour span { white-space: normal; width: 100%; min-width: 0; }
}

/* Emailing : le fieldset du choix de nature s'élargissait au-delà du
   formulaire qui le porte et poussait l'écran de vingt pixels sur
   téléphone. Il ne dépasse plus son contenant. */
form fieldset.fieldset_full.fieldset_nature_envoi,
#page_compte form fieldset.fieldset_full.fieldset_nature_envoi { width: 100%; max-width: 100%; min-width: 0; }

/* « Pas d'abonnement · 5 séances » : deux faits, un séparateur — sans
   lui, la ligne se lisait comme une phrase accidentelle. */
.ligne_membre .compte_abo + .compte_credits::before { content: '· '; }

/* Sur téléphone, l'état du compte reprend sa propre ligne : la règle
   du rang, sous ses deux pseudo-identifiants, rétablissait
   « flex: 0 0 auto » et recollait la formule à droite du nom, qui
   n'avait plus que quarante-huit pixels — le courriel s'y coupait
   lettre à lettre. */
@media (max-width: 800px) {
  body:not(#page_accueil):not(#page__en_construction).espace_club .ligne_membre > .compte_seances {
    flex: 0 0 100%;
    margin-left: 0;
    text-align: left;
  }
}

/* « Rejoindre le dojo » : la carte se resserre sur ses cinq portes.
   Les portes tenaient cinq cent soixante pixels, centrées dans une
   carte qui en faisait le double — un couloir blanc de chaque côté,
   qui donnait à l'écran l'air inachevé. La carte prend la mesure de
   ce qu'elle contient. */
#page_inscription .container > section:has(.choix_intentions) {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Les conditions : une page qui se lit. Les cartes prenaient toute la
   planche et le texte, borné à sa mesure de lecture, laissait un
   couloir blanc à droite ; les cartes prennent la mesure du texte. */
#page_conditions .container > section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Le nom d'une famille de tarifs, au-dessus de ses tuiles : le titre
   porte le nom, le petit texte dit à quoi elle sert. */
.famille_tarifs {
  margin: 26px 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.famille_tarifs small {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--club-texte-doux, #616371);
}


/*  « Événements / Stages » dans le bout de barre, à côté de « Réserver ».
    Même gabarit que « Réserver », en creux : c'est une invitation, pas
    le geste quotidien. Sur téléphone, le libellé se réduit à « Stages ». */
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages {
	display: inline-flex;
	align-items: center;
	margin: 0;
	min-width: 0;
	padding: 8px 16px;
	border: 1px solid var(--club-bouton, #2f3a8f);
	border-radius: 8px;
	background: transparent;
	color: var(--club-bouton, #2f3a8f);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
}
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages:hover,
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages:focus,
body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages[aria-current="page"] {
	background: var(--club-bouton, #2f3a8f);
	color: var(--club-bouton-texte, #fff);
}
.btn_stages .lib_court { display: none; }
@media screen and (max-width: 1000px) {
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages {
		padding: 7px 10px;
		font-size: 13px;
	}
	.btn_stages .lib_long { display: none; }
	.btn_stages .lib_court { display: inline; }
}
@media screen and (max-width: 480px) {
	/*  Réserver, Stages, la pastille et « Menu » sur une seule ligne,
	    même sur trois cent soixante pixels : chacun rend un peu de marge. */
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .bout_barre { gap: 6px; }
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute > .bout_barre .btn.btn_reserver { padding: 8px 10px; }
	body:not(#page_accueil):not(#page__en_construction) header.left_header.barre_haute .btn.btn_stages { padding: 7px 8px; }
}

/* ======================================================================== */
/*  Partenaires et avantages (page publique, et onglet de « Le site »)       */
/*  et « Ma fiche en ordre, mon bonus à la clé » (migrations 054 et 055).    */
/*  Écrit en CSS simple, à l'identique dans style.scss et style.css.         */
/* ======================================================================== */
.liste_partenaires .fiche_partenaire { gap: 8px; }
.partenaire_logo_cadre {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 10px;
	border-radius: calc(var(--club-arrondi, 4px) * 2);
	background-color: #fff;
}
.partenaire_logo {
	display: block;
	max-width: 100%;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.fiche_partenaire .partenaire_nom { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.fiche_partenaire .partenaire_texte {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--club-texte, #161a2e);
}
.partenaire_avantage {
	margin-top: 4px;
	padding: 10px 12px;
	border-radius: calc(var(--club-arrondi, 4px) * 2);
	border: 1px dashed var(--club-principale, #39449f);
}
.partenaire_avantage .puce { margin-bottom: 4px; }
.partenaire_avantage p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.fiche_partenaire .partenaire_lien { margin: auto 0 0; padding-top: 6px; font-size: 14px; }
.fiche_partenaire .partenaire_lien a { color: var(--club-principale, #39449f); }

ul.liste_partenaires_admin { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 16px; }
.partenaire_admin_tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.partenaire_admin_tete h4 { margin: 0; }
.partenaire_admin_logo { display: block; max-width: 96px; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.partenaire_admin_actions { display: flex; gap: 8px; flex-wrap: wrap; }

.criteres_fiche summary { cursor: pointer; }
ul.liste_fiche_en_ordre { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; }
.liste_fiche_en_ordre li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.liste_fiche_en_ordre li small { flex-basis: 100%; color: var(--club-texte-doux, #787a86); }
.tableau_bonus_fiche td small { color: var(--club-texte-doux, #787a86); }

/* Tableau de bord, « Situation des membres » : la liste repliée et son bouton « Voir ». */
.accordeon_situation > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.accordeon_situation > summary::-webkit-details-marker { display: none; }
.accordeon_situation[open] .accordeon_voir { display: none; }