/**
 * Template vitamed — Centre VitaMed
 * CSS unique, variables en tête. Aucune dépendance externe.
 * Palette d'origine : teal #009fbb, orange #de843a, texte #333.
 */

/* ---------- Police ---------- */

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	/* woff2 en premier : 33 Ko contre 104 Ko pour le TTF, qui ne sert plus que
	   de repli pour les navigateurs anciens. */
	src: url(../fonts/nunito-sans-200.woff2) format('woff2'),
	     url(../fonts/nunito-sans-200.woff) format('woff'),
	     url(../fonts/nunito-sans-200.ttf) format('truetype');
}

/*
 * Graisse semi-grasse. Le site ne chargeait que l'ExtraLight 200 : tout ce qui
 * demandait 400 tombait en extra-fin (le menu, en capitales à 13 px, en était
 * illisible) et tout ce qui demandait 700 était engraissé artificiellement par
 * le navigateur. Cette face donne un vrai dessin aux deux cas.
 * Sous-ensemble latin, 14 Ko, il couvre tous les accents français et Œ/œ.
 */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/nunito-sans-600.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;
}

/* ---------- Variables ---------- */

:root {
	--vm-teal: #009fbb;
	--vm-teal-dark: #007d94;
	--vm-orange: #de843a;
	--vm-red: #de3a3a;
	--vm-promo-red: #d70000;
	--vm-text: #333333;
	--vm-bg-soft: #f2f2f2;
	--vm-font: 'Nunito Sans', 'Segoe UI', sans-serif;
	--vm-content-width: 1300px;
	--vm-radius: 6px;
	--vm-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;

	/* Hauteur du header collant : mesuree par template.js, repli ci-dessous
	   pour la version mobile (deux rangees) si le JS ne s'execute pas. */
	--vm-header-h: 132px;

	/* Une ancre s'arrete au-dessus du header, plus un peu d'air. */
	scroll-padding-top: calc(var(--vm-header-h) + 1.25rem);
}

@media (min-width: 62rem) {
	html {
		--vm-header-h: 66px;
	}
}

body {
	margin: 0;
	font-family: var(--vm-font);
	font-size: 19px;
	line-height: 1.4;
	color: var(--vm-text);
	background: #fff;
	overflow-x: hidden;
}

h1 {
	font-size: 2.5em;
	font-weight: normal;
	margin: 0 0 .5em;
}

h2 {
	color: var(--vm-teal);
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0 0 .6em;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 1em 0 .5em;
}

h4 {
	font-size: 1.1em;
	margin: 1em 0 .4em;
}

a {
	color: var(--vm-orange);
	text-decoration: none;
	transition: color .3s, background-color .3s, opacity .3s;
}

a:hover,
a:focus {
	color: var(--vm-teal);
}

img {
	max-width: 100%;
	height: auto;
}

/* Texte réservé aux lecteurs d'écran (utilisé par mod_menu, formulaires Joomla) */
.visually-hidden,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Boutons ---------- */

.btn,
button.btn {
	display: inline-block;
	padding: 13px 21px;
	border: 0;
	border-radius: var(--vm-radius);
	font-family: var(--vm-font);
	font-size: .8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}

/* CTA principal (articles, bannières) : orange -> teal */
.btn--primary {
	background: var(--vm-orange);
}

.btn--primary:hover,
.btn--primary:focus {
	background: var(--vm-teal);
	color: #fff;
}

/* Action secondaire : contour teal, se remplit au survol. */
.btn--ghost {
	background: transparent;
	border: 2px solid var(--vm-teal);
	padding: 11px 19px;
	color: var(--vm-teal-dark);
}

.btn--ghost:hover,
.btn--ghost:focus {
	background: var(--vm-teal);
	color: #fff;
}

/* CTA header : teal -> orange */
.btn--teal {
	background: var(--vm-teal);
}

.btn--teal:hover,
.btn--teal:focus {
	background: var(--vm-orange);
	color: #fff;
}

/* Bouton icône (connexion) */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--vm-radius);
	background: var(--vm-orange);
	color: #fff;
}

.btn-icon:hover,
.btn-icon:focus {
	background: var(--vm-teal);
	color: #fff;
}

.btn-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Formulaires Joomla (connexion...) */
.btn-primary {
	background: var(--vm-teal);
	color: #fff;
	border: 0;
	padding: 10px 20px;
	border-radius: var(--vm-radius);
	cursor: pointer;
}

.btn-primary:hover { background: var(--vm-teal-dark); color: #fff; }

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .95);
}

.site-header.is-scrolled {
	border-bottom: 1px solid var(--vm-teal);
}

.site-header__inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-header__logo img {
	width: 175px;
	transition: width .3s;
	display: block;
}

.site-header.is-scrolled .site-header__logo img {
	width: 144px;
}

.site-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Les boutons du module contact (bouton + icône) centrés verticalement */
.site-header__actions .mod-custom {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------- Navigation ---------- */

.site-nav { flex: 1; }

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

/* flex-shrink 0 : un item ne doit jamais devenir plus etroit que
   "lien + fleche", sinon la fleche passe a la ligne. */
.site-nav li { position: relative; flex-shrink: 0; }

/* Les libellés sont courts et en capitales : ils ont besoin de corps et de
   graisse, pas d'interlettrage. La graisse 600 a désormais une vraie face. */
.site-nav a,
.site-nav .nav-header,
.site-nav span.separator {
	display: block;
	padding: 10px 9px;
	text-transform: uppercase;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--vm-text);
	white-space: nowrap;
}

/* Teal soutenu : le teal clair sur blanc plafonne à 2,9:1, sous le seuil de
   lisibilité pour du petit texte. Le foncé passe à 4,9:1. */
.site-nav a:hover,
.site-nav li.active > a,
.site-nav li.current > a {
	color: var(--vm-teal-dark);
}

/* Bouton chevron des sous-menus (généré par mod_menu) */
.site-nav .mod-menu__toggle-sub {
	background: none;
	border: 0;
	/* La marge negative absorbe le padding droit du lien : sans elle, la
	   fleche flotte a 18 px du libelle. */
	margin-left: -14px;
	padding: 0 8px 0 0;
	cursor: pointer;
	color: var(--vm-teal);
}

/* Flèche : dessinée en CSS (l'icône Joomla n'a pas de police d'icônes ici) */
.site-nav .mod-menu__toggle-sub .icon-chevron-down {
	display: inline-block;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: currentColor;
	vertical-align: middle;
}

/* Sur desktop, le survol suffit : bouton non cliquable mais flèche visible */
.site-nav .mod-menu__toggle-sub { pointer-events: none; }

/* Sous-menus (desktop) */
.site-nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	flex-direction: column;
	min-width: 240px;
	background: #fff;
	box-shadow: var(--vm-shadow);
	border-radius: 0 0 var(--vm-radius) var(--vm-radius);
	padding: 6px 0;
	z-index: 50;
	list-style: none;
}

/* Un item parent aligne son lien et sa flèche */
.site-nav li.parent > a,
.site-nav li.deeper > a {
	display: inline-block;
}

.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
	display: flex;
}

.site-nav li ul a,
.site-nav li ul .nav-header,
.site-nav li ul span.separator {
	text-transform: none;
	font-size: .9em;
	text-align: center;
	white-space: normal;
}

.site-nav li ul span.separator {
	color: #999;
	cursor: default;
}

/* Hamburger — caché en desktop */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	border-radius: 2px;
	background: var(--vm-teal);
	transition: transform .3s, opacity .3s;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Bannière (hero) ---------- */

.vm-hero {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.vm-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--vm-overlay, rgba(0, 159, 187, .8));
}

.vm-hero__content {
	position: relative;
	max-width: var(--vm-content-width);
	margin: 0 auto;
	padding: 7vh 20px 48px;
	width: 100%;
}

.vm-hero__content h2,
.vm-hero__content p {
	color: #fff;
	line-height: 1.5;
	max-width: 650px;
}

/* Titre de page : remonte ici par le template, c'est l'ancre visuelle du hero.
   La graisse 200 est la seule fournie par la police — on l'assume en grand. */
.vm-hero__content h1 {
	margin: 0;
	max-width: 15em;
	font-size: clamp(1.9rem, 1.05rem + 2.6vw, 3.1rem);
	font-weight: 200;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: #fff;

	/* Le voile teal descend a 50% sur l'accueil : l'ombre garde le texte lisible. */
	text-shadow: 0 2px 26px rgba(0, 0, 0, .3);
}

/* Filet orange : rappel de la couleur d'accent, sur fond teal il tranche. */
.vm-hero__content h1::after {
	content: '';
	display: block;
	width: 76px;
	height: 3px;
	margin-top: .5em;
	border-radius: 3px;
	background: var(--vm-orange);
}

.vm-hero__content h1 + p { margin-top: .9em; }

/* Entete d'actualite remontee entiere : le surtitre reste le lien de retour. */
.vm-hero__content .vm-news__entete {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Le module de banniere du blog porte l'accroche de la rubrique : elle decrit
   la section, pas l'article, et n'a plus sa place sous le titre de celui-ci.
   Le > vise l'accroche seule, le surtitre etant un p imbrique dans l'entete. */
.vm-hero__content:has(.vm-news__entete) > p { display: none; }

.vm-hero__content .vm-news__surtitre a { color: rgba(255, 255, 255, .82); }

.vm-hero__content .vm-news__surtitre a:hover,
.vm-hero__content .vm-news__surtitre a:focus-visible { color: #fff; }

.vm-hero__content .btn { margin-top: 1.6em; }

/* ---------- Contenu principal ---------- */

.site-main { min-height: 40vh; }

.site-main > * {
	max-width: var(--vm-content-width);
	margin-left: auto;
	margin-right: auto;
	padding: 24px 20px 0;
}

.site-main > :last-child { padding-bottom: 48px; }

/* Le titre parti dans le hero, le contenu attaque directement : il lui faut
   un peu plus d'air en haut qu'un simple enchainement de blocs. Le conteneur
   de messages, premier enfant et vide la plupart du temps, n'en prend pas.
   :where() annule la specificite de l'ID, sinon cette regle passerait devant
   les paddings propres de .vm-news et .cvm-auth. */
.site-main > :where(#system-message-container:empty) { padding: 0; }

.site-main > :where(#system-message-container) + * { padding-top: 44px; }

/* Titre reste en place, faute de banniere (connexion, mentions legales).
   Meme traitement que dans le hero, aux couleurs du fond clair. */
.site-main .page-header {
	margin-bottom: 1.6rem;
}

.site-main .page-header h1 {
	margin: 0;
	font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem);
	font-weight: 200;
	line-height: 1.14;
	letter-spacing: -.01em;
}

.site-main .page-header h1::after {
	content: '';
	display: block;
	width: 68px;
	height: 3px;
	margin-top: .55em;
	border-radius: 3px;
	background: var(--vm-orange);
}

/* Sections pleine largeur dans le contenu converti */
.vm-section--soft {
	background: var(--vm-bg-soft);
}

/* ---------- Connexion (code a usage unique) ---------- */

.site-main > .cvm-auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	max-width: 540px;
	padding: 56px 20px 72px;
}

.cvm-auth {
	/* Le module OTP se peint avec ces variables : on lui passe la palette du site. */
	--ifs-primary: var(--vm-teal);
	--ifs-primary-dark: var(--vm-teal-dark);
	--ifs-primary-light: #2ec4dd;
	--ifs-primary-rgb: 0, 159, 187;
	--ifs-secondary-rgb: 222, 132, 58;
	--ifs-text: var(--vm-text);
	--ifs-font-body: var(--vm-font);
}

.cvm-auth__titre {
	margin: 0;
	text-align: center;
}

.cvm-auth__intro {
	text-align: center;
	color: #5d6b72;
}

.cvm-auth__carte {
	width: 100%;
	padding: 2.75rem 2rem 2.25rem;
	background: #fff;
	border: 1px solid #e8eef3;
	border-radius: 16px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

.cvm-auth .mod-emailotp-login {
	max-width: none;
}

/* Note d'aide sous le champ : discrete, alignee sur le reste de la carte. */
.cvm-auth .auth-hint {
	margin: .85rem 0 1.25rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: #7d8b91;
	text-align: center;
}

@media (max-width: 30rem) {
	.cvm-auth__carte {
		padding: 2rem 1.25rem 1.75rem;
	}
}

/* ---------- Bandes pleine largeur (débordent du conteneur d'article) ---------- */

.vm-band {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 40px;
	margin-bottom: 40px;
}

.vm-band__inner {
	max-width: var(--vm-content-width);
	margin: 0 auto;
	padding: 54px 20px;
}

.vm-band--orange {
	background: var(--vm-orange);
	color: #fff;
}

.vm-band--orange h1,
.vm-band--orange h2,
.vm-band--orange h3,
.vm-band--orange h4 { color: #fff; }

.vm-band--grey { background: var(--vm-bg-soft); }

/* ---------- Cartes à image de fond + voile teal ---------- */

.vm-feature {
	position: relative;
	min-height: 260px;
	display: flex;
	align-items: center;
	padding: 36px;
	margin: 24px 0;
	border-radius: var(--vm-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	color: #fff;
}

.vm-feature::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 159, 187, .82);
}

.vm-feature > * { position: relative; z-index: 1; width: 100%; }

.vm-feature h2,
.vm-feature h3,
.vm-feature h4,
.vm-feature p { color: #fff; }

.vm-feature h3 { margin-top: 0; }

/* Bloc image seul (voile plus léger) */
.vm-feature--plain::before { background: rgba(0, 159, 187, .35); }

/* Cartes côte à côte : hauteurs égales (la colonne s'étire à la hauteur de la ligne) */
.vm-row > .vm-col:has(> .vm-feature) { align-self: stretch; display: flex; }
.vm-row > .vm-col > .vm-feature { flex: 1; height: 100%; margin: 0; }

/* ---------- Utilitaires de mise en page (contenu converti) ---------- */

.vm-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	margin: 24px 0;
	align-items: flex-start;
}

.vm-col {
	flex: 1 1 var(--vm-col, 100%);
	max-width: var(--vm-col, 100%);
	min-width: 0;
}

.vm-col--center { align-self: center; }

.vm-text-center { text-align: center; }
.vm-text-left   { text-align: left; }
.vm-text-right  { text-align: right; }

/* ---------- Liste blog / actualites (com_content, vue categorie) ---------- */

.com-content-category-blog__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 28px;
	margin: 32px 0;
}

/* Meme grille pour le module d'accueil (mod_articles, surcharge maison). */
.vm-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.com-content-category-blog__item,
.vm-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e5eaec;
	border-radius: var(--vm-radius);
	background: #fff;
	box-shadow: var(--vm-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

.com-content-category-blog__item:hover,
.vm-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.vm-post__media {
	display: block;
	background: var(--vm-bg-soft);
}

/* Les visuels sont surtout des flyers portrait charges de texte : « contain »
   evite de rogner le titre de l'affiche. */
.vm-post__media img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: contain;
	padding: 10px;
}

.vm-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px 20px 24px;
}

.vm-post__title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.3;
	/* Les h3 du site sont en capitales : illisible sur un titre d'article. */
	text-transform: none;
}

.vm-post__title a { color: var(--vm-teal); }
.vm-post__title a:hover { color: var(--vm-orange); }

.vm-post__date {
	margin: 0;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #7d8b91;
}

.vm-post__excerpt {
	margin: 0;
	font-size: .95em;
	line-height: 1.55;
	color: #55636a;
}

/* Le bouton reste colle en bas : les cartes d'une meme rangee s'alignent. */
.vm-post__more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 11px;
	padding-bottom: 11px;
}

/* Pagination (liste a puces nue dans le rendu natif). */
.com-content-category-blog__navigation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 8px 0 16px;
}

.com-content-category-blog__navigation .counter {
	order: 2;
	float: none;
	margin: 0;
}

.site-main .pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Aller au debut / a la fin : redondant avec precedent / suivant, et cela
   faisait six boutons pour deux pages. */
.site-main .pagination > li:first-child,
.site-main .pagination > li:last-child {
	display: none;
}

.site-main .pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dfe5e8;
	border-radius: var(--vm-radius);
	background: #fff;
	color: var(--vm-teal-dark);
	font-size: .95em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.site-main .pagination a.page-link:hover,
.site-main .pagination a.page-link:focus-visible {
	border-color: var(--vm-teal);
	background: var(--vm-teal);
	color: #fff;
}

/* Page courante : pleine, non cliquable visuellement. */
.site-main .pagination .active .page-link {
	border-color: var(--vm-teal);
	background: var(--vm-teal);
	color: #fff;
	cursor: default;
}

/* Fleche sans destination : presente mais visiblement inerte. */
.site-main .pagination .disabled .page-link {
	border-color: #edf1f3;
	background: #fafbfc;
	color: #c3cdd2;
}

/* Les fleches sont des icones d'une police absente du template : on les
   redessine en caracteres, sinon les boutons paraissent vides. */
.site-main .pagination [class^="icon-angle"]::before {
	font-family: inherit;
	font-size: 1.35em;
	line-height: 1;
}

.site-main .pagination .icon-angle-double-left::before { content: '\00AB'; }
.site-main .pagination .icon-angle-left::before { content: '\2039'; }
.site-main .pagination .icon-angle-right::before { content: '\203A'; }
.site-main .pagination .icon-angle-double-right::before { content: '\00BB'; }

.site-main .counter {
	font-size: .85em;
	color: #7d8b91;
}

/* ---------- Pages legales (mentions, confidentialite, cookies) ---------- */

.site-main > .com-content-article:has(.vm-legal) {
	max-width: 860px;
}

.vm-legal {
	max-width: 820px;
}

.vm-legal__maj {
	margin: 0 0 1.5rem;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #7d8b91;
}

.vm-legal__intro {
	font-size: 1.1em;
	line-height: 1.6;
	color: #41525a;
}

.vm-legal h2 {
	margin: 2.4rem 0 .6rem;
	font-size: 1.35em;
	text-transform: none;
	text-align: left;
}

.vm-legal h3 {
	margin: 1.6rem 0 .4rem;
	font-size: 1.05em;
	text-transform: none;
	text-align: left;
	color: var(--vm-text);
}

.vm-legal p,
.vm-legal li { line-height: 1.65; }

.vm-legal ul { padding-left: 1.4rem; }

.vm-legal em { color: #b5651d; }

.vm-legal__table {
	width: 100%;
	margin: 1.2rem 0 1.6rem;
	border-collapse: collapse;
	font-size: .95em;
}

.vm-legal__table th,
.vm-legal__table td {
	padding: 10px 12px;
	border: 1px solid #e5eaec;
	text-align: left;
	vertical-align: top;
}

.vm-legal__table thead th {
	background: var(--vm-bg-soft);
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* ---------- Actualite : page d'un article de la categorie blog ---------- */

.site-main > .vm-news {
	max-width: 820px;
	padding: 48px 20px 72px;
}

/* Deux colonnes des qu'il y a la place : le texte garde une largeur de lecture
   confortable et l'affiche se lit en regard, au lieu d'etre reléguée sous un
   long blanc. En dessous, tout s'empile dans l'ordre du document. */
.vm-news__grille {
	display: grid;
}

@media (min-width: 62rem) {
	.site-main > .vm-news { max-width: 1120px; }

	.vm-news__grille {
		grid-template-columns: minmax(0, 1fr) 20rem;

		/* L'affiche est plus haute que la colonne de texte. Sans cette derniere
		   ligne en 1fr, son surplus se repartirait entre les trois lignes et
		   creuserait des blancs entre la date, le texte et l'encadre. */
		grid-template-rows: auto auto 1fr;
		column-gap: 3.5rem;
		align-items: start;
	}

	.vm-news__quand { grid-area: 1 / 1; }
	.vm-news__corps { grid-area: 2 / 1; }
	.vm-news__infos { grid-area: 3 / 1; }

	/* L'affiche accompagne la lecture : elle reste sous les yeux pendant qu'on
	   parcourt les modalites d'inscription, plus bas dans la colonne. */
	.vm-news__visuel {
		grid-area: 1 / 2 / span 3;
		position: sticky;
		top: calc(var(--vm-header-h) + 1.5rem);
	}
}

/* Date de l'evenement : c'est l'information qu'on vient chercher en premier,
   elle sort du texte courant. justify-self, sinon l'etiquette prend toute la
   largeur de la colonne. */
.vm-news__quand {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: .6rem;
	margin: 0 0 1.9rem;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: rgba(0, 159, 187, .1);
	color: var(--vm-teal-dark);
	font-size: .95rem;
	line-height: 1.35;
}

.vm-news__quand svg { flex: none; }

.vm-news__entete {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--vm-carte-bord, #e5eaec);
}

.vm-news__surtitre {
	margin: 0 0 8px;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.vm-news__surtitre a {
	color: #7d8b91;
	text-decoration: none;
}

.vm-news__surtitre a:hover { color: var(--vm-teal); }

.vm-news__titre {
	margin: 0;
	font-size: 2.1em;
	line-height: 1.2;
}

.vm-news__corps {
	font-size: 1.02em;
	line-height: 1.7;
	color: #3f4d54;
}

.vm-news__corps p { margin: 0 0 1.15em; }

.vm-news__corps > :last-child { margin-bottom: 0; }

/* La date partie en etiquette, le paragraphe suivant ouvre le texte : il sert
   de chapeau. */
.vm-news__corps > p:first-child {
	font-size: 1.12em;
	line-height: 1.6;
	color: #41525a;
}

.vm-news__corps h2,
.vm-news__corps h3 {
	margin: 2rem 0 .6rem;
	font-size: 1.35em;
	text-transform: none;
	text-align: left;
}

.vm-news__corps ul,
.vm-news__corps ol {
	margin: 1rem 0;
	padding-left: 1.4rem;
}

.vm-news__corps li { margin-bottom: .35rem; }

/* Les flyers sont livres en pleine resolution : on les cadre. */
.vm-news__corps img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.75rem auto;
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
}

.vm-news__corps a { text-decoration: underline; }

/* ---------- Affiche de l'evenement ---------- */

.vm-news__visuel {
	margin: 0 0 2.25rem;
}

.vm-news__visuel img {
	display: block;
	width: 100%;
	max-width: 20rem;
	height: auto;
	margin: 0 auto;
	border: 1px solid #e8eef3;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .13);
}

/* ---------- Encadre d'inscription ---------- */

/* Le filet orange separe l'action a mener du texte qui la precede. */
.vm-news__infos {
	margin: 2.25rem 0 0;
	padding: 1.5rem 1.75rem 1.6rem;
	border: 1px solid #e5eaec;
	border-left: 4px solid var(--vm-orange);
	border-radius: 10px;
	background: #fafcfd;
}

.vm-news__infos-titre {
	margin: 0 0 .9rem;
	font-size: .8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--vm-teal);
}

.vm-news__infos ul {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-news__infos li { margin: 0; }

.vm-news__infos a { text-decoration: underline; }

/* ---------- Autres actualites ---------- */

/* Un evenement passe laisse le visiteur sans suite : les cartes lui en donnent
   une sans repasser par la liste. */
.vm-news__autres {
	margin-top: 3.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--vm-carte-bord, #e5eaec);
}

.vm-news__autres-titre {
	margin: 0;
	font-size: 1.05em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--vm-teal);
}

/* Visuel cliquable : le bouton n'apporte que le curseur et le focus. */
.vm-news .vm-zoom {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.vm-news__corps .vm-zoom { margin: 1.75rem auto; }

.vm-news__visuel .vm-zoom { margin: 0; }

.vm-news .vm-zoom img {
	margin: 0;
	transition: box-shadow .15s ease, transform .15s ease;
}

.vm-news .vm-zoom:hover img,
.vm-news .vm-zoom:focus-visible img {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

/* Boite d'agrandissement */
.vm-loupe {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 26, 32, .9);
}

.vm-loupe[hidden] { display: none; }

.vm-loupe__image {
	max-width: min(1100px, 100%);
	max-height: 88vh;
	border-radius: var(--vm-radius);
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	object-fit: contain;
}

.vm-loupe__fermer {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

.vm-loupe__fermer:hover,
.vm-loupe__fermer:focus-visible {
	background: rgba(255, 255, 255, .32);
}

/* Le fond ne defile plus tant que la boite est ouverte. */
body.vm-fige { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.vm-news .vm-zoom img { transition: none; }
	.vm-news .vm-zoom:hover img { transform: none; }
}

.vm-news__pied {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--vm-carte-bord, #e5eaec);
}

/* Bouton de retour : meme dessin que sur les fiches therapeutes. */
.vm-news .cvm-retour {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem 1.1rem .5rem .85rem;
	border: 1px solid #dfe5e8;
	border-radius: 999px;
	background: #fff;
	color: var(--vm-teal-dark);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.vm-news .cvm-retour:hover,
.vm-news .cvm-retour:focus-visible {
	border-color: var(--vm-teal);
	background: var(--vm-teal);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 159, 187, .25);
}

.vm-news .cvm-retour__fleche {
	flex: none;
	transition: transform .15s ease;
}

.vm-news .cvm-retour:hover .cvm-retour__fleche {
	transform: translateX(-3px);
}

@media (max-width: 640px) {
	.vm-news__titre { font-size: 1.6em; }
}

/* ---------- Blocs de contenu (pages d'information) ---------- */

/* Largeur de lecture : au-dela d'environ 75 caracteres, l'oeil se perd
   d'une ligne a l'autre. Le conteneur d'article fait 1300 px. */
.vm-prose {
	max-width: 72ch;
	/* Cale a gauche : le bloc partage son bord avec les rangees qui suivent. */
	margin-inline: 0 auto;
}

.vm-prose--center {
	margin-inline: auto;
}

.vm-lead {
	font-size: 1.12em;
	line-height: 1.65;
}

/* Remarque mise en avant (avertissement, precision pratique). */
.vm-note {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--vm-orange);
	border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
	background: var(--vm-bg-soft);
}

.vm-note p:first-child { margin-top: 0; }
.vm-note p:last-child  { margin-bottom: 0; }

/* Panneau blanc (coordonnees, encadre partenaire). */
.vm-panneau {
	padding: 28px 24px;
	border: 1px solid #e5eaec;
	border-radius: var(--vm-radius);
	background: #fff;
	box-shadow: var(--vm-shadow);
}

.vm-panneau > :first-child { margin-top: 0; }
.vm-panneau > :last-child  { margin-bottom: 0; }

.vm-panneau__logo {
	display: block;
	max-width: 160px;
	height: auto;
	margin: 0 0 18px;
}

/* Coordonnees : libelle discret + valeur lisible. */
.vm-infos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.vm-infos span {
	display: block;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #7d8b91;
}

/* Rangee de boutons. */
.vm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* Carte Google : l'iframe brute sort en 300x150, ici elle occupe la colonne. */
.vm-map {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--vm-radius);
	overflow: hidden;
	box-shadow: var(--vm-shadow);
}

.vm-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Grille de cartes (Nos salles, blog) */
.vm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.vm-card {
	border: 1px solid #ddd;
	border-radius: var(--vm-radius);
	overflow: hidden;
	text-align: center;
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vm-card img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	display: block;
}

.vm-card > a:first-child img { object-fit: cover; }

.vm-card h2 { font-size: 1.2em; margin: 0 12px; }

.vm-card__price { font-weight: bold; margin: 0 12px; }

.vm-card .btn { margin: auto auto 0; }

/* Liste blog de l'accueil (mod_articles) — grille de cartes */
.vm-bloglist .mod-articles-items {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.vm-bloglist .mod-articles-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #ddd;
	border-radius: var(--vm-radius);
	overflow: hidden;
	height: 100%;
}

.vm-bloglist .mod-articles-item-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.vm-bloglist .mod-articles-title {
	order: 2;
	margin: 0;
	padding: 12px 14px 0;
	font-size: 1.05em;
	text-transform: none;
	letter-spacing: 0;
}

.vm-bloglist .mod-articles-title a { color: var(--vm-teal); }
.vm-bloglist .mod-articles-title a:hover { color: var(--vm-orange); }

/* Image d'intro (souvent en lien juste avant le contenu) */
.vm-bloglist .mod-articles-item img {
	order: 1;
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.vm-bloglist .mod-articles-introtext {
	order: 4;
	padding: 8px 14px;
	font-size: .9em;
	flex: 1;
}

.vm-bloglist .mod-articles-info,
.vm-bloglist time {
	order: 3;
	padding: 6px 14px 0;
	font-size: .8em;
	color: #888;
}

.vm-bloglist .mod-articles-readmore {
	order: 5;
	padding: 0 14px 16px;
	margin-top: auto;
}

.vm-bloglist .mod-articles-readmore a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--vm-orange);
	border-radius: var(--vm-radius);
	font-size: .85em;
	color: var(--vm-orange);
}

.vm-bloglist .mod-articles-readmore a:hover {
	background: var(--vm-orange);
	color: #fff;
}

/* Encadré promotionnel : un aplat doux plutôt qu'un gros ovale cerné de rouge,
   qui datait la page. L'information reste rouge, donc toujours repérable. */
.vm-promo {
	max-width: 620px;
	margin: 36px auto;
	padding: 1.35rem 1.75rem;
	border: 1px solid rgba(215, 0, 0, .22);
	border-radius: 12px;
	background: #fdf4f4;
	color: var(--vm-promo-red);
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.45;
	text-align: center;
}

.vm-promo p { margin: 0; }

/* ---------- Galerie de photos dans un article ---------- */

/* Trois photos empilées dans une colonne laissaient un long vide en face du
   texte. Dès qu'un bloc contient plusieurs figures il devient une galerie :
   la première en grand, les suivantes côte à côte. */
.com-content-article__body div:has(> figure + figure) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.com-content-article__body div:has(> figure + figure) > figure {
	margin: 0;
	aspect-ratio: 4 / 3;
}

.com-content-article__body div:has(> figure + figure) > figure:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.com-content-article__body figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
}

/* Les figures importées portent une légende vide (<br>) qui écarte les images. */
.com-content-article__body figcaption:has(> br:only-child) { display: none; }

/* Face à une galerie haute, le texte se cale au milieu plutôt qu'en haut. */
.vm-row:has(figure + figure) { align-items: center; }

/* ---------- Page d'une salle à louer ---------- */

/*
 * Ces pages déversaient leurs paragraphes sur 1250 px, sans hiérarchie : un
 * mur de texte sous la galerie. On leur rend une largeur de lecture et un
 * rythme, et on transforme les trois blocs qui portent la décision d'achat
 * — équipement, tarif, étapes — en éléments lisibles d'un coup d'œil.
 *
 * Le sélecteur s'accroche à la présence du calendrier de disponibilité :
 * c'est le marqueur d'une page de salle, et il ne se trouve nulle part
 * ailleurs. Aucune autre page n'est touchée.
 */
.com-content-article__body:has(.cvm-dispo) > :is(p, ul, ol, h3, h4) {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}

.com-content-article__body:has(.cvm-dispo) > p {
	line-height: 1.65;
	margin-bottom: 1.1em;
}

/* Respiration entre les grandes sections. */
.com-content-article__body:has(.cvm-dispo) > h2 { margin-top: 3rem; }

/* Équipement de la salle : des étiquettes se parcourent, une liste à puces
   se lit ligne à ligne. */
.com-content-article__body:has(.cvm-dispo) .vm-col > ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.3rem 0 1.6rem;
	padding: 0;
	list-style: none;
}

.com-content-article__body:has(.cvm-dispo) .vm-col > ul > li {
	margin: 0;
	padding: .45rem .95rem;
	border-radius: 999px;
	background: rgba(0, 159, 187, .1);
	color: var(--vm-teal-dark);
	font-size: .82em;
	line-height: 1.3;
}

/* Tarifs : c'est l'information décisive, elle sort du fil du texte. Le
   paragraphe d'en-tête et sa liste forment une seule carte, en deux boîtes
   accolées — le HTML de l'article ne permet pas de les réunir autrement. */
.com-content-article__body:has(.cvm-dispo) p:has(> strong):has(+ ul) {
	max-width: 50rem;
	margin: 2rem auto 0;
	padding: 1.15rem 1.6rem .3rem;
	border: 1px solid #e5eaec;
	border-bottom: 0;
	border-left: 4px solid var(--vm-teal);
	border-radius: 12px 12px 0 0;
	background: #fafcfd;
}

.com-content-article__body:has(.cvm-dispo) p:has(> strong) + ul {
	max-width: 50rem;
	margin: 0 auto 2rem;
	padding: .4rem 1.6rem 1.4rem 2.9rem;
	border: 1px solid #e5eaec;
	border-top: 0;
	border-left: 4px solid var(--vm-teal);
	border-radius: 0 0 12px 12px;
	background: #fafcfd;
}

.com-content-article__body:has(.cvm-dispo) p:has(> strong) + ul li {
	margin-bottom: .45rem;
}

.com-content-article__body:has(.cvm-dispo) p:has(> strong) + ul li:last-child {
	margin-bottom: 0;
}

/* Étapes de location : même principe de deux boîtes accolées, en gris pour
   ne pas concurrencer la carte de tarifs. */
.com-content-article__body:has(.cvm-dispo) h4 {
	max-width: 50rem;
	margin: 1.5rem auto 0;
	padding: 1.15rem 1.6rem .25rem;
	border: 1px solid #e8edef;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: var(--vm-bg-soft);
	color: var(--vm-teal-dark);
	font-size: 1.02em;
}

.com-content-article__body:has(.cvm-dispo) h4 + p {
	max-width: 50rem;
	margin: 0 auto;
	padding: .35rem 1.6rem 1.35rem;
	border: 1px solid #e8edef;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: var(--vm-bg-soft);
}

/* Photo unique de présentation : mêmes coins que la galerie de la salle de
   conférence. Pas d'ombre ici — deux de ces pages affichent un logo détouré,
   qu'une ombre enfermerait dans un rectangle visible. */
.com-content-article__body:has(.cvm-dispo) .vm-col > img {
	border-radius: var(--vm-radius);
}

/* Le calendrier flottait sur le blanc : il devient une carte posée. */
.com-content-article__body .cvm-dispo {
	max-width: 58rem;
	margin: 1.5rem auto 2.5rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid #e5eaec;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--vm-shadow);
}

@media (max-width: 40rem) {
	.com-content-article__body .cvm-dispo { padding: 1rem; }
}

/* ---------- Footer ---------- */

.site-footer {
	border-top: 1px solid #e5e5e5;
	margin-top: 48px;
	font-size: .9em;
}

.vm-footer {
	max-width: var(--vm-content-width);
	margin: 0 auto;
	padding: 48px 20px 24px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
}

.vm-footer h4 {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--vm-text);
	margin: 0 0 .8em;
}

.vm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-footer li { margin-bottom: .5em; }

.vm-footer__brand img { margin-bottom: 16px; }

.vm-footer__brand li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vm-footer__brand svg {
	width: 18px;
	height: 18px;
	fill: var(--vm-teal);
	flex-shrink: 0;
}

.vm-footer__bottom {
	max-width: var(--vm-content-width);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid #eee;
}

/* Icônes réseaux sociaux */
.vm-social {
	display: flex;
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.vm-social a { display: inline-flex; }

.vm-social svg {
	width: 32px;
	height: 32px;
	fill: var(--vm-orange);
	transition: fill .3s;
}

.vm-social a:hover svg { fill: var(--vm-teal); }

/* ---------- Pages hors-ligne / erreur ---------- */

.offline-card,
.error-card {
	max-width: 420px;
	margin: 10vh auto;
	padding: 32px;
	text-align: center;
	border-radius: var(--vm-radius);
	box-shadow: var(--vm-shadow);
}

.offline-card input {
	display: block;
	width: 100%;
	margin: 6px 0 14px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: var(--vm-radius);
}

/* ---------- Responsive ---------- */

/* Zone intermediaire : le header se resserre avant de passer en burger.
   A 1280 px le header naturel fait exactement 1280 px : sans cette zone,
   le flex compresse les items (bouton sur 2 lignes, fleche qui descend). */
@media (max-width: 1439px) {
	.site-header__inner { gap: 12px; }

	.site-header__logo img { width: 150px; }

	/* La graisse 600 est plus large que l'ExtraLight qu'elle remplace : à
	   1200 px, le dernier palier avant le burger, les libellés demandaient
	   10 px de plus que la place disponible. On récupère la marge sur les
	   espacements, pas sur le corps — c'est lui qui porte la lisibilité. */
	.site-nav a,
	.site-nav .nav-header,
	.site-nav span.separator {
		padding: 10px 6px;
		font-size: .72em;
		letter-spacing: .3px;
	}
}

/* Menu burger : des 1199 px, le header desktop ne tient plus. */
@media (max-width: 1199px) {
	.site-header__inner { flex-wrap: wrap; }

	.site-header__logo { order: 1; margin-right: auto; }

	.site-header__actions { order: 2; margin-left: 0; }

	.nav-toggle { display: block; order: 3; }

	.site-nav {
		order: 4;
		flex-basis: 100%;
		width: 100%;
		display: none;
		border-top: 1px solid #eee;
		margin-top: 8px;
	}

	.site-nav.is-open { display: block; }

	.site-nav ul {
		flex-direction: column;
		justify-content: flex-start;
	}

	.site-nav > ul > li { border-bottom: 1px solid #f0f0f0; }

	/* Menu déplié : la largeur n'est plus disputée, les libellés peuvent
	   grandir et les zones tactiles gagner en hauteur. */
	.site-nav a,
	.site-nav .nav-header,
	.site-nav span.separator {
		white-space: normal;
		font-size: .95rem;
		padding: 13px 4px;
	}

	/* Item parent : lien + bouton chevron sur une ligne */
	.site-nav li.parent,
	.site-nav li.deeper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.site-nav li.parent > a,
	.site-nav li.deeper > a { flex: 1; }

	/* Bouton chevron cliquable en mobile */
	.site-nav .mod-menu__toggle-sub {
		pointer-events: auto;
		padding: 10px 16px;
	}

	.site-nav li.is-expanded > .mod-menu__toggle-sub .icon-chevron-down {
		transform: rotate(180deg);
	}

	/* Sous-menus en accordéon */
	.site-nav li ul {
		position: static;
		transform: none;
		box-shadow: none;
		padding-left: 16px;
		flex-basis: 100%;
	}

	/* Ne pas ouvrir au survol en mobile, seulement via le bouton */
	.site-nav li:hover > ul { display: none; }
	.site-nav li.is-expanded > ul { display: flex; }
}

@media (max-width: 960px) {
	.vm-footer { grid-template-columns: 1fr; gap: 24px; }

	.vm-footer__bottom { flex-direction: column; }
}

@media (max-width: 760px) {
	.vm-row { display: block; }
	.vm-col { max-width: 100%; }
	.vm-col + .vm-col { margin-top: 20px; }

	/* Le H1 du hero descend tout seul, son clamp suit la largeur de l'ecran. */
	.vm-hero__content h2 { font-size: 1.3em; }

	.vm-hero__content h1::after { width: 56px; }

	.vm-promo { font-size: 1.05em; }
}

@media (max-width: 640px) {
	body { font-size: 17px; }
	.site-header__logo img { width: 150px; }
}