/* ===========================================================================
   PAGE D'ACCUEIL — implemente design_handoff_accueil/            11/08/2026
   ---------------------------------------------------------------------------
   Feuille servie UNIQUEMENT sur le gabarit « Accueil — refonte 2026 »
   (functions.php : is_page_template). Tout est porte par `.ly-accueil` : rien
   ne peut fuir sur les autres pages.

   Les jetons --lydie-* vivent dans style.css, partages avec l'en-tete.

   POINT DE RUPTURE UNIQUE : 921 px, celui d'Astra. Le handoff dit « < 900 px »,
   mais Astra bascule sur son en-tete mobile a 921 : a 910 px on aurait l'entete
   mobile avec le corps desktop. Le pied de page suit deja cette borne depuis le
   07/08.

   Ordre de lecture : socle, atomes partages, puis les 6 sections, puis les deux
   paliers responsive.
   =========================================================================== */


/* --- Socle : reprendre la main sur Astra ---------------------------------- */

/* Le gabarit demande la pleine largeur (padding 0 80px, pas de max-width).
   Le filtre astra_get_content_layout = 'page-builder' fait deja le gros du
   travail ; ces trois regles couvrent les conteneurs qu'il laisse en place. */
.page-template-template-accueil .site-content .ast-container {
	max-width: none;
	padding: 0;
}

.page-template-template-accueil .entry-header,
.page-template-template-accueil .ast-single-entry-banner {
	display: none;
}

.ly-accueil {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background-color: var(--lydie-cream);
	font-family: var(--lydie-texte);
	color: var(--lydie-body);
}

/* Le lot A impose Playfair Display a tous les titres en `!important`
   (specificite 0,0,1 + important). Sans `!important` ici, les H1/H2 de la
   maquette sortiraient en Playfair au lieu de Bitter.

   /!\ AUCUNE MARGE dans ces trois resets. Un selecteur `.ly-accueil h2` vaut
   (0,1,1) et l'emporte sur le `.ly-rangee__titre` (0,1,0) du composant : les
   marges de la maquette etaient toutes ecrasees, titres et paragraphes se
   retrouvaient colles. Chaque composant pose SES marges, en toutes-directions
   (`margin: 14px 0 0`) pour neutraliser aussi celles d'Astra. */
.ly-accueil h1,
.ly-accueil h2 {
	font-family: var(--lydie-titre-bitter) !important;
	font-weight: 700 !important;
	color: var(--lydie-ink);
	text-wrap: pretty;
}

.ly-accueil ul {
	list-style: none;
}

.ly-accueil li {
	margin: 0;
}

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

/* Pas de `margin` ici non plus : `.ly-accueil figure` vaut (0,1,1) et ecrasait
   le `margin-top` des deux photos, en (0,1,0). C'est la QUATRIEME fois que ce
   piege se presente sur cette feuille (p, h2, ul, figure) — voir le bloc de
   commentaire des titres. La marge par defaut du navigateur sur <figure>
   (1em 40px) est annulee par chaque composant photo. */
.ly-accueil figure {
	border-radius: 10px;
	/* Visible tant que la photo n'est pas peinte : evite le trou blanc. */
	background-color: var(--lydie-cream-alt);
}

/* Le rayon passe sur l'image elle-meme : le `overflow: hidden` a quitte le
   reset pour que le scotch du hero puisse deborder de son cadre. */
.ly-accueil figure img {
	border-radius: inherit;
}

/* Focus clavier — meme regle partout, inversee sur les fonds sombres. */
.ly-accueil a:focus-visible,
.ly-accueil button:focus-visible,
.ly-accueil .ly-vignette:focus-visible {
	outline: 2px solid var(--lydie-green);
	outline-offset: 3px;
}

.ly-contact a:focus-visible,
.ly-contact button:focus-visible {
	outline-color: var(--lydie-cream);
}


/* --- Atomes partages ------------------------------------------------------ */

/* Sur-titre : premier des quatre emplois du brun. */
.ly-surtitre {
	margin: 0;
	font-family: var(--lydie-condense);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--lydie-brown);
}

.ly-icone {
	font-style: normal;
	line-height: 1;
}

/* `line-height: 1.2` est indispensable : le lot A pose 1.7 sur le body, ce qui
   ajoutait 9 px de haut a chaque bouton et faisait deriver toute la maquette.
   Meme raison sur le lien « En savoir plus », les horaires et l'indice swipe. */
.ly-btn {
	display: inline-block;
	border-radius: 999px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.ly-accueil .ly-btn--plein {
	padding: 16px 34px;
	background-color: var(--lydie-green);
	color: var(--lydie-white);
	font-family: var(--lydie-condense);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ly-accueil .ly-btn--plein:hover,
.ly-accueil .ly-btn--plein:focus,
.ly-accueil .ly-btn--plein:active {
	background-color: var(--lydie-green-btn-h);
	color: var(--lydie-white);
}

.ly-accueil .ly-btn--contour {
	padding: 14px 28px;
	border: 1.5px solid var(--lydie-ink);
	color: var(--lydie-ink);
	font-family: var(--lydie-titre-bitter);
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.ly-accueil .ly-btn--contour:hover,
.ly-accueil .ly-btn--contour:focus {
	background-color: var(--lydie-ink);
	color: var(--lydie-cream);
}

/* Deuxieme emploi du brun : le CTA telephone, sur fond sombre uniquement. */
.ly-accueil .ly-btn--tel {
	padding: 17px;
	background-color: var(--lydie-brown-btn);
	color: var(--lydie-on-dark);
	font-family: var(--lydie-titre-bitter);
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}

.ly-accueil .ly-btn--tel:hover,
.ly-accueil .ly-btn--tel:focus {
	background-color: var(--lydie-brown-btn-h);
	color: var(--lydie-on-dark);
}

.ly-accueil .ly-btn--contour-sombre {
	padding: 16px;
	border: 1.5px solid var(--lydie-outline-dark);
	color: var(--lydie-cream);
	font-family: var(--lydie-condense);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ly-accueil .ly-btn--contour-sombre:hover,
.ly-accueil .ly-btn--contour-sombre:focus {
	background-color: var(--lydie-outline-dark-h);
	color: var(--lydie-cream);
}

/* Troisieme emploi du brun : le survol des liens de contenu. */
.ly-accueil .ly-lien-plus {
	display: inline-block;
	margin-top: 26px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--lydie-green);
	color: var(--lydie-green);
	font-family: var(--lydie-condense);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}

.ly-accueil .ly-lien-plus:hover,
.ly-accueil .ly-lien-plus:focus {
	border-bottom-color: var(--lydie-brown);
	color: var(--lydie-brown);
}


/* --- 01 · Section profil --------------------------------------------------
   La photo garde son ratio 4:5 d'origine et sa HAUTEUR suit celle de la colonne
   de texte : ses bords haut et bas s'alignent sur ceux du texte, et sa largeur
   en decoule au lieu de remplir la colonne. Elle se cale a droite, sur le bord
   du contenu, pour que la marge exterieure de la page reste franche.

   Deux etapes ont mene la : un ratio 4:5 sur toute la largeur de la colonne la
   faisait culminer a 1 199 px a 1 920 (plus haut que la fenetre) ; l'etirer sur
   toute la largeur reglait la hauteur mais rendait le cadre paysage, et `cover`
   sacrifiait alors le chien. Garder le ratio et lacher la largeur regle les
   deux : plus aucun recadrage, la photo est entiere. */
.ly-profil {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 72px;
	/* 120 px de marge laterale, contre 80 pour les autres sections : le hero est
	   le seul bloc ou la largeur de colonne se retourne contre lui. Plus la
	   colonne est large, plus le texte est court ; plus le texte est court, plus
	   la photo (dont la hauteur suit le texte) est petite ; et plus le vide
	   central grandit. Resserrer les colonnes agit sur les deux bouts a la fois.
	   Consequence assumee : le bord gauche du hero est rentre de 40 px par
	   rapport aux sections du dessous. */
	padding: 72px 120px;
}

.ly-profil__bas {
	grid-column: 1;
	grid-row: 2;
	margin-top: 40px;
}

.ly-profil__photo {
	position: relative;
	grid-column: 2;
	grid-row: 1 / -1;
	margin: 0;
	align-self: stretch;
	/* `justify-self: center` empeche l'etirement horizontal — la largeur devient
	   celle que le ratio impose — et repartit le reste de la colonne a egalite
	   de chaque cote. Calee sur le bord droit, la photo rasait la marge de la
	   page et laissait tout le vide entre elle et le texte.
	   `height: 100%` rend la hauteur DEFINIE avant que le ratio en derive la
	   largeur — sans quoi les deux se calculent l'un par l'autre. */
	justify-self: center;
	width: auto;
	height: 100%;
	aspect-ratio: 4 / 5;
}

/* L'image est SORTIE DU FLUX. Sans cela, `height: 100%` contre un conteneur de
   hauteur indefinie retombe sur `auto` : l'image reinjectait sa hauteur
   intrinseque (1046x1308) dans le calcul des rangees et leur imposait son 4:5,
   `align-self: stretch` ou pas. En absolu elle ne participe plus au
   dimensionnement, c'est la colonne de texte qui commande, et `object-fit`
   recadre. Piege discret : a 1 440 px le texte fait justement 755 px, soit
   exactement le 4:5 de la colonne — les deux valeurs coincidaient et le defaut
   ne se voyait qu'a 1 920. */
.ly-profil__photo img {
	position: absolute;
	inset: 0;
}

/* UNE SEULE LIGNE, exigence de Valentin. 10.47 = la largeur du titre en em
   (10,330 mesuree au navigateur pour « Ostéopathe animalier ») plus 1,4 % de
   marge sur les metriques ; 20.95 en est le double, pour replier la division par
   deux des colonnes. `min()` plafonne a la taille de la maquette : le titre ne
   grossit jamais au-dela.
   /!\ DEUX choses a remesurer si on y touche.
   1. Le LIBELLE : « Ostéopathe animalier à domicile » mesurait 15,390 em et la
      ligne imposait 22 px en mobile, sous les 25 px des H2 ; raccourci, il rend
      33 px en mobile et le H1 redevient le plus gros texte de la page.
   2. Les CONSTANTES soustraites, qui valent `2 x padding + gap` de la section.
      Elles sont passees de 232 a 312 quand la marge laterale du hero est allee
      de 80 a 120 px : la formule surestimait alors la place disponible et le
      titre repassait sur deux lignes. */
.ly-profil__titre {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: min(60px, calc((100vw - 312px) / 20.95));
	line-height: 1.05;
}

.ly-faits {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.ly-fait {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ly-fait__pastille {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--lydie-tan);
	font-size: 17px;
}

.ly-fait__texte {
	padding-top: 8px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--lydie-body);
}

.ly-fait__texte strong {
	font-weight: 600;
	color: var(--lydie-ink);
}

.ly-profil__para {
	max-width: 52ch;
	margin: 32px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--lydie-muted);
}

.ly-profil__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 40px;
}


/* Etiquette collee en haut de la photo du hero — le seul element de la page
   qui s'autorise une fantaisie. Elle reste dans le systeme : aplat, filet 1 px,
   aucune ombre, et le brun des sur-titres. La legere rotation et le
   debordement au-dessus du cadre sont ce qui la fait lire comme un morceau de
   ruban plutot que comme un badge. */
.ly-scotch {
	position: absolute;
	top: -13px;
	left: 26px;
	z-index: 1;
	padding: 7px 18px;
	transform: rotate(-2.5deg);
	background-color: var(--lydie-tan);
	border: 1px solid var(--lydie-line-section);
	font-family: var(--lydie-condense);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--lydie-brown);
}


/* --- 02 / 03 / 04 · Rangees illustrees ------------------------------------
   Meme ressort que la section profil : la photo (3:2) est plus haute que le
   texte, elle couvre les quatre rangees. */
.ly-rangee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto 1fr;
	column-gap: 72px;
	padding: 64px 80px;
	border-top: 1px solid var(--lydie-line-section);
}

/* Les deux fonds sont poses explicitement : `--cream` reprend la couleur de la
   page, mais l'ecrire rend la rangee independante de son contexte. */
.ly-rangee--band {
	background-color: var(--lydie-band);
}

.ly-rangee--cream {
	background-color: var(--lydie-cream);
}

.ly-rangee__photo {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0;
	overflow: hidden;
	align-self: center;
	aspect-ratio: 3 / 2;
}

.ly-rangee__texte {
	grid-column: 2;
	grid-row: 2;
}

/* Inversion desktop : la photo passe a droite, le texte a gauche. */
.ly-rangee--inverse .ly-rangee__photo {
	grid-column: 2;
}

.ly-rangee--inverse .ly-rangee__texte {
	grid-column: 1;
}

.ly-rangee__titre {
	margin: 0;
	font-size: 40px;
	line-height: 1.12;
}

.ly-rangee__para {
	max-width: 48ch;
	margin: 18px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--lydie-muted);
}


/* --- 05 · Galerie ---------------------------------------------------------
   Le defilement est natif : overflow-x + scroll-snap, aucune librairie. Le JS
   n'ajoute que les fleches et le clavier.

   Le `scroll-snap` avait ete retire le temps du defilement automatique — un
   calage par cran se bat contre un mouvement continu. Le mouvement automatique
   parti, il revient : une vignette ne se repose plus a moitie coupee.

   PAS DE PUCES : elles avaient ete retirees avec le defilement automatique, et
   22 photos en feraient 22, une rangee de pastilles plus lourde que ce qu'elle
   renseigne. Les fleches et le glissement suffisent. */
.ly-galerie {
	padding: 64px 0;
	border-top: 1px solid var(--lydie-line-section);
}

.ly-galerie__tete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 80px;
}

.ly-galerie__titre {
	margin: 14px 0 0;
	font-size: 40px;
}

/* Indice tactile : mobile uniquement. */
.ly-galerie__swipe {
	display: none;
	margin: 0;
}

.ly-galerie__fleches {
	display: flex;
	gap: 10px;
}

.ly-fleche {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--lydie-ink);
	border-radius: 50%;
	background: none;
	color: var(--lydie-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}

.ly-fleche:hover:not(:disabled) {
	border-color: var(--lydie-green);
	color: var(--lydie-green);
}

.ly-fleche:disabled {
	border-color: var(--lydie-ring);
	color: var(--lydie-muted);
	cursor: default;
}

.ly-galerie__piste {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 28px 80px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Aligne la vignette sur le bord du contenu, pas sous le padding. */
	scroll-padding-left: 80px;
	scrollbar-width: none;
}

.ly-galerie__piste::-webkit-scrollbar {
	display: none;
}

/* Ni legende ni badge : retires volontairement du design. */
.ly-vignette {
	flex: none;
	width: 340px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--lydie-cream-alt);
	scroll-snap-align: start;
}




/* --- 06 · Contact ---------------------------------------------------------
   Les horaires sont un frere du texte : en desktop la grille les range sous le
   paragraphe, en mobile elle les fait passer sous les boutons. */
.ly-contact {
	display: grid;
	grid-template-columns: 1fr 320px;
	grid-template-areas:
		"texte    actions"
		"horaires actions";
	column-gap: 64px;
	row-gap: 18px;
	align-items: center;
	padding: 64px 80px;
	background-color: var(--lydie-ink);
}

.ly-contact__texte {
	grid-area: texte;
}

.ly-contact__horaires {
	grid-area: horaires;
	margin: 0;
	font-family: var(--lydie-condense);
	font-size: 15px;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--lydie-on-dark-3);
}

.ly-contact__actions {
	display: flex;
	flex-direction: column;
	grid-area: actions;
	gap: 12px;
}

.ly-contact__titre {
	margin: 0;
	font-size: 40px;
	line-height: 1.12;
	color: var(--lydie-cream) !important;
}

.ly-contact__para {
	max-width: 50ch;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--lydie-on-dark-2);
}


/* ===========================================================================
   Palier 922 - 1199 px : deux colonnes resserrees
   =========================================================================== */

@media (min-width: 922px) and (max-width: 1199.98px) {

	.ly-profil,
	.ly-rangee {
		column-gap: 40px;
	}

	.ly-profil {
		padding: 72px 72px;
	}

	.ly-rangee,
	.ly-contact {
		padding: 64px 48px;
	}

	.ly-profil__titre {
		font-size: min(48px, calc((100vw - 184px) / 20.95));
	}

	/* Les H2 passaient de 25 a 40 px des 922 px, alors que le H1 fluide n'y vaut
	   que 35,2 : le titre de page devenait plus petit que les titres de section.
	   32 px reste sous le H1 sur tout le palier et adoucit la marche. */
	.ly-rangee__titre,
	.ly-galerie__titre,
	.ly-contact__titre {
		font-size: 32px;
	}

	.ly-galerie__tete {
		padding: 0 48px;
	}

	.ly-galerie__piste {
		padding: 28px 48px;
		scroll-padding-left: 48px;
	}
}


/* --- Hero : la photo bornee a sa colonne, sous 1320 px ----------------------
   Trois contraintes se disputent le hero : garder le ratio 4:5, caler la photo
   sur la hauteur du texte, et ne pas deborder de sa colonne. Elles ne tiennent
   ensemble qu'a partir de 1 320 px — mesure du croisement, colonne par colonne :
   a 1 280 la colonne fait 484 px alors qu'une photo calee sur le texte en
   reclamerait 494.

   Sous cette borne on lache l'alignement du BAS, le moins couteux des trois :
   la photo prend la largeur de sa colonne et sa hauteur suit le ratio.

   /!\ Laisser la photo deborder ne se voit pas seulement sur elle : une piste
   de grille plus large que prevu vole de la place a la colonne de texte, et le
   H1 repassait sur deux lignes a 1 200 et 1 280.

   La borne tombe juste : sous 1 320 px le texte est plus haut que la photo, donc
   elle ne force pas les rangees ; au-dela, le mode « hauteur du texte » tient.
   Toute retouche du contenu du hero demande de remesurer ce croisement
   (scratchpad, mesure du 11/08). */
@media (min-width: 922px) and (max-width: 1319.98px) {

	.ly-profil__photo {
		justify-self: stretch;
		align-self: start;
		height: auto;
	}
}


/* ===========================================================================
   Mobile <= 921 px — la maquette de reference
   =========================================================================== */

@media (max-width: 921px) {

	.ly-accueil figure,
	.ly-vignette {
		border-radius: 8px;
	}

	.ly-scotch {
		top: -11px;
		left: 18px;
		padding: 5px 14px;
		font-size: 12px;
	}

	.ly-surtitre {
		font-size: 12px;
		letter-spacing: .18em;
	}

	/* --- 01 · profil : titre, puis photo, puis les faits ------------------- */
	.ly-profil {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		padding: 26px 22px;
	}

	.ly-profil__photo {
		grid-column: 1;
		grid-row: 2;
		margin: 26px 0 0;
		/* Seule sur sa rangee : aucune hauteur de texte a suivre. La photo
		   reprend toute la largeur et c'est le ratio qui donne la hauteur —
		   l'inverse du desktop. */
		justify-self: stretch;
		height: auto;
	}

	.ly-profil__bas {
		grid-column: 1;
		grid-row: 3;
		margin-top: 22px;
	}

	.ly-profil__titre {
		font-size: min(36px, calc((100vw - 44px) / 10.47));
		line-height: 1.08;
	}

	.ly-faits {
		gap: 14px;
	}

	.ly-fait {
		gap: 12px;
	}

	.ly-fait__pastille {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.ly-fait__texte {
		padding-top: 0;
		font-size: 15px;
		line-height: 1.45;
	}

	.ly-profil__para {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.6;
	}

	.ly-profil__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 24px;
	}

	.ly-btn--plein {
		padding: 15px;
		font-size: 18px;
	}

	.ly-btn--contour {
		padding: 14px;
		font-size: 18px;
	}

	/* --- 02 / 03 / 04 : sur-titre, photo, texte --------------------------- */
	.ly-rangee {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		padding: 26px 22px;
	}

	.ly-rangee__photo,
	.ly-rangee--inverse .ly-rangee__photo {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.ly-rangee__texte,
	.ly-rangee--inverse .ly-rangee__texte {
		grid-column: 1;
		grid-row: 2;
		margin-top: 16px;
	}

	.ly-rangee__titre {
		font-size: 25px;
		line-height: 1.15;
	}

	.ly-rangee__para {
		margin-top: 10px;
		font-size: 15px;
		line-height: 1.6;
	}

	.ly-lien-plus {
		margin-top: 14px;
		padding-bottom: 3px;
		font-size: 16px;
	}

	/* --- 05 · galerie : swipe natif, pas de fleches ----------------------- */
	.ly-galerie {
		padding: 26px 0;
	}

	.ly-galerie__tete {
		align-items: baseline;
		padding: 0 22px;
	}

	.ly-galerie__surtitre,
	.ly-galerie__fleches {
		display: none;
	}

	.ly-galerie__titre {
		margin-top: 0;
		font-size: 25px;
	}

	.ly-galerie__swipe {
		display: block;
		font-family: var(--lydie-condense);
		font-size: 13px;
		letter-spacing: .1em;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--lydie-placeholder);
	}

	.ly-galerie__piste {
		gap: 12px;
		padding: 14px 22px;
		scroll-padding-left: 22px;
	}

	.ly-vignette {
		width: 78%;
		scroll-snap-align: center;
	}


	/* --- 06 · contact : boutons pleine largeur, horaires en dernier ------- */
	.ly-contact {
		grid-template-columns: 1fr;
		grid-template-areas:
			"texte"
			"actions"
			"horaires";
		row-gap: 0;
		padding: 32px 22px;
		text-align: center;
	}

	.ly-contact__titre {
		font-size: 27px;
		line-height: 1.15;
	}

	.ly-contact__para {
		max-width: none;
		margin-top: 12px;
		font-size: 15px;
		line-height: 1.6;
	}

	.ly-contact__actions {
		gap: 10px;
		margin-top: 20px;
	}

	.ly-btn--tel {
		padding: 15px;
		font-size: 19px;
	}

	.ly-btn--contour-sombre {
		padding: 14px;
		font-size: 17px;
	}

	.ly-contact__horaires {
		margin-top: 16px;
		font-size: 14px;
		letter-spacing: .1em;
	}

}

}