@charset "UTF-8";
/* ==========================================================================
   La feuille de la vitrine
   ==========================================================================

   Elle habille la seule page d'entrée du site — l'écran « accueil » — et
   n'est chargée que sur elle : l'en-tête la demande quand $page vaut
   « accueil », comme il ne demande le calendrier et l'éditeur de texte
   riche qu'aux écrans qui en portent un. Les quarante autres écrans n'ont
   pas à télécharger vingt kilo-octets de bandeaux et de grilles qu'ils
   n'affichent jamais.

   Le corps de page porte « page_vitrine » : l'identifiant nomme le
   GABARIT et non l'écran, parce que « #page_accueil » désigne dans
   style.css la colonne du formulaire de connexion, sur cent trente-deux
   règles. Voir le commentaire de src/ecrans/includes/header.php.

   ELLE NE CHOISIT AUCUNE COULEUR. Toutes viennent des propriétés
   personnalisées que l'en-tête pose d'après les réglages du club —
   --club-principale, --club-encre, --club-fond… — avec la teinte livrée
   en repli. Un club qui change sa couleur principale voit la vitrine
   suivre, sans qu'on recompile quoi que ce soit.

   UNE NOTE SUR LES POIDS DE SÉLECTEURS. style.css réserve son gabarit
   aux écrans qui portent la colonne ou la barre haute, par des
   sélecteurs de la forme « body:not(#page_accueil):not(#page__en_construction) »,
   qui pèsent deux identifiants. La vitrine est un troisième cas, comme
   l'accueil et l'écran d'attente : elle ne veut ni la colonne, ni le
   pied fixé sur son bord. Les quelques règles qui doivent défaire
   celles-là reprennent donc le même poids, et l'emportent parce que
   cette feuille est chargée après. Elles sont peu nombreuses et chacune
   le dit.

   Elle est écrite à la main, et directement en CSS : ce n'est pas une
   partie de style.scss, il n'y a rien à recompiler.
   ========================================================================== */

.vitrine {
	/* Les couleurs du club, nommées une fois. */
	--vit-accent:       var(--club-principale, #39449F);
	--vit-accent-vif:   var(--club-principale-vive, #5D66B0);
	--vit-accent-fonce: var(--club-principale-fonce, #2B3377);
	--vit-accent-pale:  var(--club-principale-claire, #C8CBE4);
	--vit-second:       var(--club-secondaire, #0A7D62);
	--vit-texte:        var(--club-texte, #161A2E);
	--vit-doux:         var(--club-texte-doux, #616371);
	--vit-fond:         var(--club-fond, #FFFFFF);
	--vit-calme:        var(--club-surface-page, #F8F8FB);
	--vit-trait:        var(--club-ligne, #E6E7EC);

	/* Le fond des bandeaux sombres. Il ne suit pas « --club-encre » :
	   un club dont la couleur sombre est un brun ou un bleu clair verrait
	   son texte blanc s'effacer dessus, et ces bandeaux portent une photo
	   par-dessus laquelle il faut lire. */
	--vit-nuit:         #0B0D16;

	--vit-rayon:        18px;
	--vit-rayon-petit:  12px;
	--vit-ombre:        0 18px 44px -26px rgba(11, 13, 22, .40);
	--vit-ombre-haute:  0 26px 60px -28px rgba(11, 13, 22, .48);

	/* La largeur utile, et sa gouttière. Une seule valeur pour toutes
	   les sections : c'est elle qui aligne les titres d'un bandeau à
	   l'autre, et rien ne se remarque autant qu'un alignement manqué. */
	--vit-large:        min(1180px, 100% - 44px);

	font-family: var(--club-police, "IBM Plex Sans", "Segoe UI", sans-serif);
	color: var(--vit-texte);
	background: var(--vit-fond);
	line-height: 1.62;
	font-size: 16px;
	/* Les sections sont pleine largeur : la marge du gabarit du site,
	   qui réserve la place d'une colonne de navigation, n'a pas cours. */
	margin: 0;
	overflow-x: clip;
}

.vitrine * { box-sizing: border-box; }

/* LE RYTHME DES PARAGRAPHES, SANS ÉCRASER CELUI DES BLOCS.
   Écrite « .vitrine p », cette règle pèse une classe et un type : elle
   l'emportait sur « .vit_citation », « .vit_liens_section » ou
   « .vit_slogan », qui ne pèsent qu'une classe. Tous les écarts réglés
   bloc par bloc plus bas revenaient donc à un em, et la citation du club,
   qui se centre par « margin: 0 auto », se retrouvait collée à gauche.

   « :where() » ne compte pour rien : la règle vaut alors une seule
   classe, ce qui suffit à passer devant le gabarit du site, et laisse
   chaque bloc reprendre sa marge à lui. */
.vitrine :where(p) { margin: 0 0 1em; }
.vitrine :where(p:last-child) { margin-bottom: 0; }

/* La couleur des liens se pose LA OU IL Y A DU TEXTE, et non sur tous
   les « a » de la page. Un « .vitrine a » l'emporterait sur « .vit_btn »,
   qui ne pèse qu'une classe : les boutons pleins sortaient alors avec un
   texte de la couleur de leur propre fond, donc invisibles, et les
   boutons des bandeaux sombres en bleu au lieu de blanc. */
.vitrine a { text-decoration: none; }
.vit_texte a,
.vit_chapo a,
.vit_note_gerance a,
.vit_fiche_courriel a,
.vit_liens_section > a:not(.vit_btn) { color: var(--vit-accent); }
.vit_texte a:hover, .vit_texte a:focus-visible,
.vit_chapo a:hover, .vit_chapo a:focus-visible,
.vit_note_gerance a:hover, .vit_note_gerance a:focus-visible,
.vit_fiche_courriel a:hover, .vit_fiche_courriel a:focus-visible,
.vit_liens_section > a:not(.vit_btn):hover,
.vit_liens_section > a:not(.vit_btn):focus-visible { color: var(--vit-accent-fonce); }

/* LE GABARIT DU SITE HABILLE TOUT « SPAN » CONTENU DANS UN TITRE, UN
   PARAGRAPHE OU UN LIEN : bloc, italique, police de citation, centré,
   dix pixels de marge haute et basse. C'est ce qu'il faut aux
   sous-titres de ses écrans. Ceux de la vitrine sont des libellés, un
   nom d'enseigne et un titre d'album : chacun reprend ce qu'il doit
   être, plutôt que d'hériter d'une italique centrée. */
.vitrine .vit_album_texte,
.vitrine .vit_famille_titre span,
.vitrine .vit_pastille span,
.vit_barre .vit_enseigne_nom {
	font-family: inherit;
	font-style: normal;
	margin: 0;
}
.vitrine .vit_album_texte,
.vitrine .vit_famille_titre span { text-align: left; }

/* Le repère de navigation au clavier. La feuille du site en pose un ;
   sur les fonds sombres de la vitrine il disparaîtrait. */
.vitrine a:focus-visible,
.vitrine button:focus-visible,
.vit_barre a:focus-visible,
.vit_barre button:focus-visible {
	outline: 3px solid var(--club-principale-claire, #C8CBE4);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Le corps de la page : le gabarit du site pose un fond gris et une
   marge de colonne sur tout écran qui n'est ni la colonne de connexion
   ni l'écran d'attente. La vitrine est le troisième. Même poids, et
   cette feuille est chargée après. */
body#page_vitrine:not(#page_accueil) {
	background: var(--club-fond, #FFFFFF);
	overflow-x: clip;
}
body#page_vitrine:not(#page_accueil) main#principal { display: block; }

/* LES ANCRES PASSENT SOUS LA BARRE, SANS CETTE MARGE.
   La barre est fixée en haut : un lien « #tarifs » amenait le titre de la
   section pile derrière elle, et le visiteur atterrissait sur un
   paragraphe sans savoir où il était. La marge de défilement vaut la
   hauteur de la barre, plus l'air qu'on veut voir au-dessus du titre.

   Le défilement est adouci, sauf pour qui a demandé moins d'animations :
   cette feuille n'étant chargée que sur la vitrine, la règle ne concerne
   qu'elle. */
.vitrine section[id] { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ==========================================================================
   1. La barre
   ========================================================================== */

/* Le gabarit du site pose « header { position: fixed; width: 500px } » :
   c'est la colonne de la connexion. Cette barre-ci traverse la page. */
.vit_barre {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 60;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.vit_barre_dedans {
	width: var(--vit-large);
	margin: 0 auto;
	min-height: 72px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.vit_enseigne {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	font-weight: 600;
	letter-spacing: -.01em;
	color: #fff;
}
.vit_enseigne:hover, .vit_enseigne:focus-visible { color: #fff; }
.vit_enseigne img {
	height: 46px;
	width: auto;
	display: block;
	/* Un logo dessiné en sombre disparaîtrait sur la photo d'ouverture :
	   une ombre portée le détoure sans le repeindre. */
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}
/* Le gabarit du site pose un italique sur le nom qui accompagne le logo :
   il l'y met pour sa colonne, pas pour une barre de navigation. */
.vit_enseigne_nom { font-size: 17px; font-style: normal; }

.vit_menu { display: flex; align-items: center; gap: 26px; }
.vit_menu ul {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vit_menu ul a {
	color: rgba(255, 255, 255, .88);
	font-size: 14.5px;
	font-weight: 500;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.vit_menu ul a:hover, .vit_menu ul a:focus-visible {
	color: #fff;
	border-bottom-color: var(--club-principale-claire, #C8CBE4);
}

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

/* La barre posée : dès que la page a défilé, elle prend le fond du site
   et son texte redevient sombre. C'est vitrine.js qui pose la classe. */
.vit_barre.est_posee {
	background: var(--club-fond, #fff);
	border-bottom-color: var(--club-ligne, #E6E7EC);
	box-shadow: 0 10px 30px -22px rgba(11, 13, 22, .5);
}
.vit_barre.est_posee .vit_enseigne { color: var(--club-texte, #161A2E); }
.vit_barre.est_posee .vit_enseigne img { filter: none; }
.vit_barre.est_posee .vit_menu ul a { color: var(--club-texte-doux, #616371); }
.vit_barre.est_posee .vit_menu ul a:hover,
.vit_barre.est_posee .vit_menu ul a:focus-visible {
	color: var(--club-principale, #39449F);
	border-bottom-color: var(--club-principale, #39449F);
}
.vit_barre.est_posee .vit_btn_creux {
	color: var(--club-texte, #161A2E);
	border-color: var(--club-ligne, #D8D9E0);
}
.vit_barre.est_posee .vit_btn_creux:hover {
	border-color: var(--club-principale, #39449F);
	color: var(--club-principale, #39449F);
}

/* Le bouton du menu replié : il ne paraît qu'aux largeurs où le menu se
   cache. La règle qui le montre est dans la media query, plus bas. */
.vit_bouton_menu {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .14);
	border-radius: 10px;
	cursor: pointer;
	position: relative;
}
.vit_barres, .vit_barres::before, .vit_barres::after {
	position: absolute;
	left: 13px;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}
.vit_barres { top: 21px; }
.vit_barres::before { content: ""; left: 0; top: -6px; }
.vit_barres::after  { content: ""; left: 0; top: 6px; }
.vit_barre.est_posee .vit_bouton_menu { background: var(--club-surface-page, #F1F1F5); }
.vit_barre.est_posee .vit_barres,
.vit_barre.est_posee .vit_barres::before,
.vit_barre.est_posee .vit_barres::after { background: var(--club-texte, #161A2E); }
/* Menu ouvert, la barre est peinte au fond du site : la croix doit
   passer à l'encre, sinon elle est blanche sur blanc et le seul moyen de
   refermer le panneau devient invisible. */
.vit_barre.est_ouverte .vit_bouton_menu { background: var(--club-surface-page, #F1F1F5); }
.vit_barre.est_ouverte .vit_barres { background: transparent; }
.vit_barre.est_ouverte .vit_barres::before {
	background: var(--club-texte, #161A2E);
	transform: translateY(6px) rotate(45deg);
}
.vit_barre.est_ouverte .vit_barres::after {
	background: var(--club-texte, #161A2E);
	transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   2. Les boutons
   ========================================================================== */

.vit_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border: 1.5px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
	cursor: pointer;
}
.vit_btn:hover { transform: translateY(-1px); }

.vit_btn_plein {
	background: var(--club-bouton, var(--club-principale, #39449F));
	color: var(--club-bouton-texte, #fff);
	box-shadow: 0 12px 26px -16px var(--club-principale, #39449F);
}
.vit_btn_plein:hover, .vit_btn_plein:focus-visible {
	background: var(--club-principale-fonce, #2B3377);
	color: var(--club-bouton-texte, #fff);
	box-shadow: 0 16px 30px -16px var(--club-principale, #39449F);
}

/* Sur la photo d'ouverture et sur les bandeaux sombres. */
.vit_btn_clair {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	backdrop-filter: blur(6px);
}
.vit_btn_clair:hover, .vit_btn_clair:focus-visible {
	background: rgba(255, 255, 255, .96);
	color: var(--club-texte, #161A2E);
	border-color: transparent;
}

.vit_btn_creux {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}
.vit_btn_creux:hover, .vit_btn_creux:focus-visible {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

.vit_btn_grand { padding: 15px 30px; font-size: 16px; }


/* ==========================================================================
   3. Le bandeau d'ouverture
   ========================================================================== */

.vit_hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 132px 0 0;
	background-color: var(--vit-nuit);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* SANS CECI, LE VOILE NE COUVRE PAS LE HAUT DE LA PHOTO.
	   L'origine d'un fond est la boîte de remplissage : la photo et son
	   dégradé se plaçaient donc cent trente-deux pixels plus bas, sous la
	   barre de navigation, qui se retrouvait en blanc sur la partie CLAIRE
	   et non voilée de l'image. La boîte de bordure les remet à zéro. */
	background-origin: border-box;
	color: #fff;
	overflow: hidden;
}

/* Une lueur à la couleur du club, en haut à droite : elle rattache la
   photo — qui est celle que le club a déposée, et dont personne ne
   connaît les teintes — à la palette du site. */
.vit_hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto auto;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle, var(--club-principale, #39449F) 0%, transparent 62%);
	opacity: .30;
	pointer-events: none;
}

.vit_hero_dedans {
	position: relative;
	width: min(var(--vit-large), 820px);
	margin: 0 auto;
	padding-bottom: 54px;
	text-align: center;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.vit_hero_logo {
	width: auto;
	height: clamp(96px, 13vw, 148px);
	margin-bottom: 22px;
	filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
}

.vit_salut {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--club-principale-claire, #C8CBE4);
}

.vit_titre {
	margin: 0;
	font-family: var(--club-police-titres, var(--club-police, inherit));
	font-size: clamp(2.5rem, 6.4vw, 4.7rem);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -.032em;
	text-transform: none;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

.vit_slogan {
	margin: 18px 0 0;
	font-size: clamp(1.12rem, 2.1vw, 1.5rem);
	font-weight: 300;
	color: rgba(255, 255, 255, .94);
	text-wrap: balance;
}

.vit_accroche {
	margin: 12px 0 0;
	font-size: 16px;
	color: rgba(255, 255, 255, .78);
	max-width: 46em;
	text-wrap: pretty;
}

.vit_hero_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 30px;
}

.vit_pastille {
	margin: 20px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .26);
	font-size: 13.5px;
	font-weight: 500;
	color: #fff;
	backdrop-filter: blur(6px);
}
.vit_pastille span { color: var(--club-secondaire, #0A7D62); font-size: 11px; }

/* Les repères, au bas de la photo : quatre faits comptés sur ce que la
   page montre plus bas, jamais une phrase écrite pour l'occasion. */
.vit_reperes {
	position: relative;
	width: var(--vit-large);
	margin: 0 auto 34px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--vit-rayon);
	overflow: hidden;
	backdrop-filter: blur(10px);
}
.vit_reperes li {
	background: rgba(11, 13, 22, .46);
	padding: 18px 20px;
	text-align: center;
	/* Une case dont la valeur passe à la ligne — une liste de jours sur
	   un écran étroit — allongeait la rangée entière, et les trois autres
	   restaient collées en haut de leur case. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vit_reperes b {
	display: block;
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	letter-spacing: -.02em;
}
/* Une liste de jours ou un nom de ville n'est pas un chiffre : elle
   garde la police du texte, et se resserre pour tenir sur une ligne. */
.vit_reperes .vit_repere_menu b {
	font-family: inherit;
	font-size: 17px;
	letter-spacing: 0;
}
.vit_reperes span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .70);
}


/* ==========================================================================
   4. Les sections
   ========================================================================== */

/* Le gabarit du site fait de « section » une carte : fond blanc, bordure,
   coins arrondis, ombre et vingt-cinq pixels de marge basse. C'est ce
   qu'il faut à un écran du compte. Les sections de la vitrine sont des
   bandes qui traversent la page, et deux bandes voisines ne se séparent
   pas par un liseré. */
.vitrine .vit_hero,
.vitrine .vit_section,
.vitrine .vit_bandeau {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	z-index: auto;
}

.vit_section { padding: clamp(64px, 8.5vw, 116px) 0; background: var(--vit-fond); }
.vit_section_calme { background: var(--vit-calme); }

.vit_section_sombre {
	background-color: var(--vit-nuit);
	background-size: cover;
	background-position: center;
	background-origin: border-box;
	color: rgba(255, 255, 255, .84);
}
.vit_section_sombre .vit_h2 { color: #fff; }
.vit_section_sombre .vit_sur_titre { color: var(--club-principale-claire, #C8CBE4); }
.vit_section_sombre a { color: #fff; }
/* Le lien de section porte la couleur du club. Sur le bandeau sombre —
   « Voir le plan et l'itinéraire » — un accent foncé s'y perdait : un
   club au rouge profond ou au bleu marine ne se lit pas sur du noir. Il
   passe au blanc, comme le reste du bandeau. */
.vit_section_sombre .vit_liens_section > a:not(.vit_btn) {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .45);
}
.vit_section_sombre .vit_liens_section > a:not(.vit_btn):hover,
.vit_section_sombre .vit_liens_section > a:not(.vit_btn):focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}

.vit_large { width: var(--vit-large); margin: 0 auto; }

.vit_sur_titre {
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vit-accent);
}
.vit_sur_titre::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	flex: 0 0 auto;
}

.vit_h2 {
	margin: 0 0 16px;
	font-family: var(--club-police-titres, var(--club-police, inherit));
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -.026em;
	color: var(--vit-texte);
	text-wrap: balance;
	/* Le gabarit du site met tous les h2 en capitales : c'est le ton de
	   ses écrans, ce n'est pas celui d'une page de présentation, où le
	   titre fait quarante pixels et se lit comme une phrase. */
	text-transform: none;
}

.vit_chapo {
	margin: 0 0 34px;
	max-width: 62ch;
	font-size: 17px;
	color: var(--vit-doux);
}

.vit_texte { font-size: 16.5px; color: var(--vit-doux); }
.vit_texte p { margin-bottom: 1.05em; }
.vit_texte strong, .vit_texte b { color: var(--vit-texte); }

.vit_note_gerance {
	margin-top: 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--vit-accent-pale);
	background: var(--vit-calme);
	border-radius: 0 var(--vit-rayon-petit) var(--vit-rayon-petit) 0;
	font-size: 14px;
	color: var(--vit-doux);
}

.vit_liens_section { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vit_liens_section > a:not(.vit_btn) {
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1.5px solid var(--vit-accent-pale);
	padding-bottom: 2px;
}
.vit_liens_section > a:not(.vit_btn)::after { content: " →"; }
.vit_liens_section > a:not(.vit_btn):hover { border-bottom-color: var(--vit-accent); }

.vit_deux_colonnes {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(34px, 5vw, 68px);
	align-items: center;
}


/* ==========================================================================
   5. Le collage de photos
   ========================================================================== */

.vit_collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* « minmax(0, 1fr) » et non « 1fr » : la taille minimale automatique
	   d'un élément de grille est celle de son contenu, et le contenu est
	   ici une photo de huit cents pixels de haut. Les rangées passaient
	   outre la proportion demandée, et le collage sortait carré. */
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 16px;
	aspect-ratio: 5 / 4;
}
.vit_collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--vit-rayon);
	box-shadow: var(--vit-ombre);
	display: block;
}
.vit_collage_0 { grid-area: 1 / 1 / 3 / 2; }
.vit_collage_1 { grid-area: 1 / 2 / 2 / 3; }
.vit_collage_2 { grid-area: 2 / 2 / 3 / 3; }


/* ==========================================================================
   6. Le bandeau de la phrase du club
   ========================================================================== */

.vit_bandeau {
	padding: clamp(58px, 7vw, 96px) 0;
	background-color: var(--vit-nuit);
	background-size: cover;
	background-position: center;
	background-origin: border-box;
	text-align: center;
	color: #fff;
}
.vit_citation {
	/* La largeur utile ET une mesure courte : une phrase de slogan se lit
	   sur deux ou trois lignes, pas sur toute la largeur d'un écran. Les
	   deux dans un seul « width », pour qu'aucun « max-width » du gabarit
	   ne vienne en défaire la moitié. */
	width: min(var(--vit-large), 24ch);
	margin: 0 auto;
	text-align: center;
	font-family: var(--club-police-titres, var(--club-police, inherit));
	font-size: clamp(1.6rem, 3.6vw, 2.7rem);
	line-height: 1.22;
	font-weight: 300;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.vit_citation::before { content: "« "; color: var(--club-principale-claire, #C8CBE4); }
.vit_citation::after  { content: " »"; color: var(--club-principale-claire, #C8CBE4); }
.vit_citation_source {
	margin: 18px 0 0;
	font-size: 12.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .60);
}


/* ==========================================================================
   7. L'horaire
   ========================================================================== */

.vit_grille_jours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 18px;
}

.vit_jour {
	background: var(--vit-fond);
	border: 1px solid var(--vit-trait);
	border-radius: var(--vit-rayon);
	padding: 20px 20px 8px;
	box-shadow: var(--vit-ombre);
	position: relative;
	overflow: hidden;
}
.vit_jour::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--vit-accent), var(--vit-accent-vif));
}
.vit_jour_nom {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vit-accent);
}
.vit_seances { list-style: none; margin: 0; padding: 0; }
.vit_seances li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 0;
	border-top: 1px solid var(--vit-trait);
}
.vit_seances li:first-child { border-top: 0; padding-top: 0; }
.vit_heure {
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 13px;
	font-weight: 500;
	color: var(--vit-doux);
	letter-spacing: -.01em;
}
.vit_cours { font-size: 15px; font-weight: 500; color: var(--vit-texte); }
.vit_cours small { display: block; font-weight: 400; font-size: 13px; color: var(--vit-doux); }


/* ==========================================================================
   8. Les tarifs
   ========================================================================== */

.vit_famille { margin-top: 34px; }
.vit_famille:first-of-type { margin-top: 8px; }
.vit_famille_titre {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
	color: var(--vit-texte);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}
.vit_famille_titre span {
	font-size: 14px;
	font-weight: 400;
	color: var(--vit-doux);
}

/* « auto-fill » et non « auto-fit » : une famille qui ne compte qu'un
   tarif — l'affiliation annuelle, souvent seule — voyait sa carte
   s'étirer sur les onze cent quatre-vingts pixels de la section, avec un
   libellé de trois mots perdu au milieu. Les pistes vides gardent leur
   place, et la carte garde sa taille. */
.vit_grille_prix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
	gap: 16px;
}

.vit_prix {
	background: var(--vit-fond);
	border: 1px solid var(--vit-trait);
	border-radius: var(--vit-rayon);
	padding: 22px 20px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vit_prix:hover {
	transform: translateY(-3px);
	border-color: var(--vit-accent-pale);
	box-shadow: var(--vit-ombre-haute);
}
.vit_prix_libelle {
	margin: 0 0 12px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--vit-doux);
	min-height: 2.8em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-wrap: balance;
}
.vit_prix_montant {
	margin: 0;
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--vit-accent);
}
.vit_prix_note {
	margin: 6px 0 0;
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--vit-doux);
}


/* ==========================================================================
   9. Les albums
   ========================================================================== */

.vit_grille_albums {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: 18px;
}

.vit_album {
	position: relative;
	display: block;
	border-radius: var(--vit-rayon);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--vit-nuit);
	box-shadow: var(--vit-ombre);
	isolation: isolate;
}
.vit_album img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.vit_album::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 13, 22, 0) 34%, rgba(11, 13, 22, .82) 100%);
}
.vit_album:hover img, .vit_album:focus-visible img { transform: scale(1.06); }
.vit_album_texte {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 15px;
	z-index: 1;
	color: #fff;
}
.vit_album_texte b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.vit_album_texte small { font-size: 12.5px; color: rgba(255, 255, 255, .74); }


/* ==========================================================================
   10. L'équipe et l'agenda
   ========================================================================== */

.vit_grille_equipe {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 18px;
}
.vit_fiche {
	background: var(--vit-fond);
	border: 1px solid var(--vit-trait);
	border-radius: var(--vit-rayon);
	padding: 24px;
	box-shadow: var(--vit-ombre);
}
.vit_role {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--vit-accent-pale);
	color: var(--vit-accent-fonce);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}
.vit_fiche_nom { margin: 12px 0 8px; font-size: 19px; font-weight: 600; color: var(--vit-texte); }
.vit_fiche_texte { font-size: 15px; color: var(--vit-doux); }
.vit_fiche_courriel { margin: 10px 0 0; font-size: 14px; word-break: break-word; }

.vit_grille_events {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 16px;
}
.vit_event {
	display: block;
	padding: 22px;
	border-radius: var(--vit-rayon);
	border: 1px solid var(--vit-trait);
	background: var(--vit-fond);
	transition: transform .2s ease, box-shadow .2s ease;
}
.vit_event:hover { transform: translateY(-3px); box-shadow: var(--vit-ombre-haute); }
.vit_event_date {
	display: block;
	font-family: var(--club-chiffres, ui-monospace, monospace);
	font-size: 13px;
	font-weight: 600;
	color: var(--vit-accent);
	margin-bottom: 8px;
}
.vit_event b { display: block; font-size: 17px; color: var(--vit-texte); }
.vit_event small { color: var(--vit-doux); font-size: 13.5px; }


/* ==========================================================================
   11. Nous trouver
   ========================================================================== */

.vit_coordonnees { list-style: none; margin: 0 0 6px; padding: 0; }
.vit_coordonnees li {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 16px;
	padding: 15px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 15.5px;
}
.vit_coordonnees li:first-child { border-top: 0; }
.vit_coord_quoi {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	padding-top: 3px;
}
.vit_coordonnees a { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.vit_coordonnees a:hover { border-bottom-color: #fff; }

.vit_reseaux {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.vit_reseaux a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28);
	font-size: 13.5px;
	font-weight: 500;
}
.vit_reseaux a:hover { background: rgba(255, 255, 255, .12); }

.vit_carte_appel {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--vit-rayon);
	padding: clamp(26px, 3.4vw, 40px);
	backdrop-filter: blur(10px);
}
.vit_carte_appel h3 {
	margin: 0 0 12px;
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}
.vit_carte_appel p { color: rgba(255, 255, 255, .80); font-size: 15.5px; margin-bottom: 22px; }
.vit_carte_appel .vit_btn { width: 100%; margin-bottom: 10px; }
.vit_carte_appel .vit_btn:last-child { margin-bottom: 0; }

.vit_plan_du_site {
	width: var(--vit-large);
	margin: clamp(38px, 5vw, 64px) auto 0;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}
.vit_plan_du_site a {
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}
.vit_plan_du_site a:hover { color: #fff; }


/* ==========================================================================
   12. Le pied de page
   ========================================================================== */

/* Le gabarit du site fixe le pied sur le bord gauche, dans la couleur
   de la colonne de navigation, pour tout écran qui n'est ni la colonne
   de connexion ni l'écran d'attente. La vitrine n'a pas de colonne : son pied est
   une bande, sous la dernière section. Deux identifiants, comme la
   règle d'en face, et cette feuille est chargée après. */
body#page_vitrine:not(#page_accueil) footer {
	position: static;
	width: auto;
	max-width: none;
	min-height: 0;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 26px 22px 30px;
	background: var(--club-encre, #1F1F1F);
	border: 0;
	z-index: 1;
}
body#page_vitrine:not(#page_accueil) footer p,
body#page_vitrine:not(#page_accueil) footer a,
body#page_vitrine:not(#page_accueil) footer span,
body#page_vitrine:not(#page_accueil) footer small {
	color: rgba(255, 255, 255, .66) !important;
	font-size: 13px;
	text-align: center !important;
}
body#page_vitrine:not(#page_accueil) footer a:hover,
body#page_vitrine:not(#page_accueil) footer a:focus-visible { color: #fff !important; }


/* ==========================================================================
   13. L'apparition au défilement
   ========================================================================== */

/* La classe est posée par vitrine.js : sans script, rien n'est masqué,
   et la page se lit entière. C'est la seule façon d'animer une entrée
   sans risquer de cacher le contenu à qui n'exécute pas de script. */
.vitrine.vit_anime .vit_apparait {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.vitrine.vit_anime .vit_apparait.est_vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.vitrine.vit_anime .vit_apparait { opacity: 1; transform: none; transition: none; }
	.vitrine *, .vit_barre * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.vit_btn:hover, .vit_prix:hover, .vit_event:hover { transform: none; }
}


/* ==========================================================================
   14. Les largeurs
   ========================================================================== */

@media (max-width: 1000px) {
	.vit_deux_colonnes { grid-template-columns: 1fr; }
	.vit_collage { aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
	/* Le menu se replie derrière son bouton. Il devient un panneau posé
	   sous la barre, et non une pile qui pousse la page. */
	.vit_bouton_menu { display: block; }
	.vit_menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px 22px 20px;
		background: var(--club-fond, #fff);
		border-bottom: 1px solid var(--club-ligne, #E6E7EC);
		box-shadow: 0 24px 40px -30px rgba(11, 13, 22, .7);
		max-height: calc(100svh - 72px);
		overflow-y: auto;
	}
	.vit_barre.est_ouverte .vit_menu { display: flex; }
	.vit_barre.est_ouverte { background: var(--club-fond, #fff); }
	.vit_barre.est_ouverte .vit_enseigne { color: var(--club-texte, #161A2E); }
	.vit_barre.est_ouverte .vit_enseigne img { filter: none; }
	.vit_menu ul { flex-direction: column; align-items: stretch; gap: 0; }
	.vit_menu ul a {
		display: block;
		padding: 13px 2px;
		font-size: 16px;
		color: var(--club-texte, #161A2E);
		border-bottom: 1px solid var(--club-ligne, #E6E7EC);
	}
	.vit_menu ul a:hover, .vit_menu ul a:focus-visible {
		color: var(--club-principale, #39449F);
		border-bottom-color: var(--club-ligne, #E6E7EC);
	}
	.vit_barre_actions { margin-top: 16px; flex-direction: column; align-items: stretch; }
	.vit_barre_actions .vit_btn { width: 100%; }
	.vit_barre.est_ouverte .vit_btn_creux,
	.vit_barre .vit_menu .vit_btn_creux {
		color: var(--club-texte, #161A2E);
		border-color: var(--club-ligne, #D8D9E0);
	}
}

@media (max-width: 700px) {
	.vitrine { --vit-large: calc(100% - 32px); font-size: 15.5px; }
	.vit_hero { padding-top: 104px; }
	.vit_hero_dedans { padding-bottom: 34px; }
	.vit_reperes { grid-template-columns: repeat(2, 1fr); }
	.vit_reperes li { padding: 14px 12px; }
	.vit_reperes b { font-size: 20px; }
	.vit_reperes .vit_repere_menu b { font-size: 15px; }
	.vit_hero_actions .vit_btn { width: 100%; }
	.vit_coordonnees li { grid-template-columns: 1fr; gap: 4px; }
	.vit_collage { aspect-ratio: 4 / 3; gap: 10px; }
	.vit_citation { max-width: none; }
	.vit_prix_libelle { min-height: 0; }
}

@media (max-width: 420px) {
	.vit_enseigne_nom { display: none; }
	.vit_reperes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   LES ENCARTS LIBRES

   La page se compose seule à partir de ce que le club tient déjà. Ces
   bandes-ci sont les seules où il écrit ce qu'il veut, sous la section
   de son choix.

   Elles respirent moins qu'une section : ce sont des ajouts, pas des
   chapitres. Et elles reprennent la typographie de la vitrine plutôt
   que celle de l'espace connecté — le texte du club doit avoir l'air
   d'appartenir à la page, non d'y avoir été collé.
   ------------------------------------------------------------------ */
.vit_encart { padding: clamp(28px, 3.6vw, 52px) 0; }

/* Une mesure de lecture, et non toute la largeur : une ligne de cent
   vingt signes se relit mal, l'oeil perdant le début de la suivante. */
.vit_encart_dedans {
	max-width: 74ch;
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--vit-doux);
}

.vit_encart_dedans :where(h2, h3, h4, h5, h6) {
	margin: 0 0 12px;
	font-family: var(--club-police-titres, var(--club-police, inherit));
	line-height: 1.2;
	font-weight: 700;
	color: var(--vit-texte);
}
.vit_encart_dedans :where(h2) { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.vit_encart_dedans :where(h3) { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.vit_encart_dedans :where(h4, h5, h6) { font-size: 1.1rem; }
.vit_encart_dedans :where(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 26px; }

.vit_encart_dedans :where(strong, b) { color: var(--vit-texte); }

.vit_encart_dedans :where(ul, ol) { margin: 0 0 1em 1.35em; }
.vit_encart_dedans :where(ul) { list-style: disc; }
.vit_encart_dedans :where(ol) { list-style: decimal; }
.vit_encart_dedans :where(li) { margin: 0 0 .4em; }

.vit_encart_dedans a { color: var(--vit-accent); text-decoration: underline; }
.vit_encart_dedans a:hover,
.vit_encart_dedans a:focus-visible { color: var(--vit-accent-fonce); }

.vit_encart_dedans img { max-width: 100%; height: auto; border-radius: 10px; }

.vit_encart_dedans blockquote {
	margin: 0 0 1em;
	padding: 10px 18px;
	border-left: 3px solid var(--vit-accent-pale);
	background: var(--vit-calme);
}

/* Un tableau écrit à la main déborde vite sur un téléphone : il défile
   dans sa propre boîte plutôt que de pousser la page. */
.vit_encart_dedans table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1em;
	display: block;
	overflow-x: auto;
}
.vit_encart_dedans :where(th, td) {
	padding: 8px 12px;
	border-bottom: 1px solid var(--vit-trait, rgba(0, 0, 0, .1));
	text-align: left;
}
.vit_encart_dedans th { color: var(--vit-texte); font-weight: 600; }