/* ===========================================================================
   PAGES INTERIEURES — gabarit template-page.php                  12/08/2026
   ---------------------------------------------------------------------------
   Mise en page volontairement STANDARD : une colonne de lecture centree, un
   titre, une photo, puis le contenu de haut en bas. Pas de grille a deux
   colonnes, pas de cartes, pas de renvoi vers une autre page. La direction
   artistique vient des jetons --lydie-*, des polices et du bloc de contact,
   pas de la mise en page.

   Prolonge assets/css/accueil.css, qui est charge AVANT sur ce gabarit : le
   <main> y porte les deux classes `.ly-page .ly-accueil`. `.ly-accueil` n'est
   pas un nom de page mais la portee du socle (typographie, boutons, bloc de
   contact). Rien n'a ete deplace dans accueil.css : elle est en ligne et
   validee depuis le 11/08.

   POINT DE RUPTURE UNIQUE : 921 px, celui d'Astra — meme borne que l'accueil,
   sinon l'en-tete et le corps ne basculent pas ensemble.

   /!\ PIEGE MAISON, cinq occurrences sur accueil.css : un selecteur de type
   `.ly-accueil p` vaut (0,1,1) et ecrase les marges d'un composant en (0,1,0).
   Chaque bloc pose donc ses marges en toutes-directions.

   /!\ PIEGE ELEMENTOR : `.elementor-kit-2887 a { color: #0E0D0D }` vaut (0,1,1)
   et bat un `.ly-*` seul. Toute couleur posee sur un <a> passe par un selecteur
   a deux classes au minimum. Les pages interieures gardent Elementor actif :
   le kit est bien charge ici.
   =========================================================================== */


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

body.page-template-template-page {
	background-color: var(--lydie-sand);
}

.page-template-template-page .site-content .ast-container {
	max-width: none;
	padding: 0;
}

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


/* --- Le bandeau et la colonne de lecture ----------------------------------
   Le bandeau court d'un bord a l'autre, comme les sections de l'accueil et
   comme le bloc de contact juste en dessous. Borne a 920 px et centre, il se
   lisait comme une bande etroite posee sur le fond sable, et son bord gauche
   ne tombait pas sur celui du bloc de contact.

   La colonne de lecture est bornee et calee A GAUCHE, sur le meme bord que les
   autres sections du site (80 px) : centree, elle aurait rentre le texte de
   200 px alors que le contact commence a 80. */

/* La marge laterale passe par une VARIABLE parce qu'elle est lue a deux
   endroits : le padding ci-dessous, et la marge negative du bandeau qui doit
   l'annuler exactement. Ecrites en dur aux deux endroits, elles auraient
   diverge au premier ajustement de palier. */
.ly-doc {
	--ly-marge-doc: 80px;
	padding: 72px var(--ly-marge-doc);
	background-color: var(--lydie-cream);
}

/* Aucune borne : demande de Valentin, le texte prend toute la largeur
   disponible entre les deux marges de 80 px, comme le bloc de contact.
   Les deux bornes retirees ici sont, si on veut les remettre un jour, un
   `max-width` sur ce conteneur et un autre sur le texte courant. */
.ly-doc__colonne {
	max-width: none;
}

.ly-doc__h1 {
	margin: 0;
	font-size: 44px;
	line-height: 1.12;
	text-wrap: balance;
}

/* `.ly-accueil img` impose width/height 100% + object-fit: cover, ce qui
   suppose un cadre au ratio defini. Ici les images gardent LEURS proportions
   et ne sont jamais recadrees : selecteur a egale specificite (0,1,1), et
   cette feuille est imprimee apres. */
.ly-doc img {
	width: 100%;
	height: auto;
	object-fit: fill;
}

/* Pas de `overflow: hidden` ici : la legende doit pouvoir sortir du cadre.
   C'est l'image qui porte le rayon, le fond d'attente et le rognage.

   SEPTIEME occurrence du piege de cascade : `.ly-accueil figure` vaut (0,1,1)
   et repose son fond beige et son rayon sur la figure entiere — une bande beige
   apparaissait derriere la legende du portrait. Deux classes (0,2,0) pour
   reprendre la main, comme sur `.ly-doc__figure`. */
.ly-page .ly-doc__photo {
	margin: 32px 0 0;
	border-radius: 0;
	background: none;
}

/* Hauteur imposee : a ses proportions d'origine, la photo de tete fait 680 px
   de haut sur la colonne — le visiteur n'aurait eu que le titre et elle sur son
   premier ecran. Ancrage haut (35 %) : garde les deux tetes, ne coupe que le
   sol. C'est aussi cette hauteur qui aligne le portrait a cote d'elle en
   desktop, les deux sources n'ayant ni la meme taille ni le meme rapport. */
.ly-doc__photo img {
	height: 420px;
	background-color: var(--lydie-cream-alt);
	object-fit: cover;
	object-position: center 35%;
}

/* NEUVIEME occurrence du piege de cascade, et une regression de ma part :
   `.ly-accueil figure img { border-radius: inherit }` vaut (0,1,2) et bat un
   `.ly-doc__photo img` en (0,1,1). Or j'ai mis le rayon des <figure> a 0 pour
   supprimer la bande beige derriere les legendes — les images ont donc herite
   de 0 et leurs coins sont devenus carres, sur les deux pages a la fois.
   Il faut (0,2,1) pour reprendre la main, et le rayon doit etre pose sur
   l'IMAGE, jamais sur la figure qui porte aussi la legende. */
.ly-page .ly-doc__photo img,
.ly-page .ly-doc__figure img {
	border-radius: 10px;
}

.ly-doc__photo figcaption {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--lydie-muted);
}

/* --- Legende collee en « scotch » sur le haut de la photo -------------------
   Meme grammaire que l'etiquette « A DOMICILE » du hero de l'accueil : aplat,
   filet 1 px, aucune ombre, legere rotation. C'est le DEBORDEMENT au-dessus du
   cadre qui la fait lire comme un ruban colle plutot que comme un badge — d'ou
   l'absence de `overflow: hidden` sur la figure.

   Deux ecarts assumes avec l'etiquette de l'accueil : ni capitales ni
   interlettrage large. Celle-ci porte une PHRASE, pas un mot-cle : en capitales
   espacees elle ferait plus de 450 px et se lirait mal. */
.ly-page .ly-doc__photo--scotch {
	position: relative;
}

.ly-page .ly-doc__scotch {
	position: absolute;
	top: -12px;
	left: 26px;
	z-index: 1;
	max-width: calc(100% - 52px);
	margin: 0;
	padding: 9px 18px;
	transform: rotate(-2deg);
	border: 1px solid var(--lydie-line-section);
	background-color: var(--lydie-tan);
	font-family: var(--lydie-condense);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.25;
	color: var(--lydie-brown);
}


/* --- Les blocs ------------------------------------------------------------ */

.ly-doc__titre {
	margin: 48px 0 0;
	font-size: 30px;
	line-height: 1.2;
}

.ly-doc__para {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--lydie-body);
}

/* Un filet vertical vert plutot qu'un cadre : la citation reste dans le fil du
   texte, elle s'en detache sans l'interrompre.
   `font-style: normal` est obligatoire : le site met les <blockquote> en
   italique, et une italique non fournie est SYNTHETISEE par le navigateur —
   des lettres penchees a la main, jamais dessinees. Les quatre woff2 du site
   n'ont aucune italique. */
.ly-doc__citation {
	margin: 32px 0 0;
	padding: 0 0 0 24px;
	border: 0;
	border-left: 3px solid var(--lydie-green);
	background: none;
	font-style: normal;
	quotes: none;
}

.ly-doc__citation p {
	margin: 0;
	font-size: 18px;
	font-style: normal;
	line-height: 1.65;
	color: var(--lydie-ink);
}

.ly-doc__citation p + p {
	margin-top: 12px;
}

.ly-doc__source {
	display: block;
	margin: 12px 0 0;
	font-family: var(--lydie-condense);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--lydie-brown);
}

.ly-doc__liste {
	margin: 20px 0 0;
	padding: 0 0 0 26px;
}

/* HUITIEME occurrence du piege de cascade : `.ly-accueil ul { list-style: none }`
   vaut (0,1,1) et mangeait les puces — la liste sortait sans aucun marqueur.
   Deux classes (0,2,0) des deux cotes, y compris sur la numerotee qui n'en avait
   pas besoin : rien ne dit qu'un reset `ol` n'arrivera pas un jour. */
.ly-page .ly-doc__liste--numeros {
	list-style: decimal;
}

.ly-page .ly-doc__liste--puces {
	list-style: disc;
}

.ly-doc__liste li {
	margin: 14px 0 0;
	padding-left: 6px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--lydie-body);
}

.ly-doc__liste li::marker {
	font-family: var(--lydie-titre-bitter);
	font-weight: 700;
	color: var(--lydie-brown);
}

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

/* Les deux points qui separent l'intitule de son explication sont poses par
   bloc.php, dans un <span> : tous les items n'ont pas de detail, et un `::after`
   ne sait pas distinguer les deux cas — il laissait « Troubles organiques : »
   avec un deux-points orphelin. Il avait deja fallu le restreindre a
   `> strong:first-child` parce qu'un texte peut contenir son propre <strong>. */
.ly-doc__liste-sep {
	font-weight: 400;
	color: var(--lydie-body);
}

/* SIXIEME occurrence du piege de cascade : `.ly-accueil figure` vaut (0,1,1) et
   posait son fond d'attente beige et son rayon sur TOUTE la largeur de la
   figure — une bande beige courait a droite du portrait, qui ne fait que
   320 px. Il faut deux classes (0,2,0) pour reprendre la main. `fit-content`
   colle en plus la legende a la largeur de l'image. */
/* --- Liens dans le corps de page -------------------------------------------
   /!\ (0,2,1) OBLIGATOIRE : `.elementor-kit-2887 a { color: #0E0D0D }` vaut
   (0,1,1) et Elementor reste actif sur ces pages. Une regle en (0,1,0) ou
   (0,1,1) se ferait battre, et le lien sortirait en quasi-noir. */
.ly-page .ly-doc a {
	color: var(--lydie-green);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 150ms ease;
}

.ly-page .ly-doc a:hover,
.ly-page .ly-doc a:focus {
	color: var(--lydie-brown);
}

/* DIXIEME occurrence du piege de cascade, et encore une regression de ma part.
   `.ly-lien-plus` porte SON propre filet (`border-bottom: 2px`) et se declare
   `text-decoration: none` dans accueil.css — mais en (0,2,0), quand la regle
   generique ci-dessus vaut (0,2,1) : elle gagne, et le bouton « Lire l'article »
   sortait avec DEUX traits, son filet et un soulignement. (0,3,1) pour
   reprendre la main. La classe n'existe que dans les pages a gabarit, l'accueil
   n'a jamais ete touche. */
.ly-page .ly-doc a.ly-lien-plus {
	text-decoration: none;
}


/* --- Formulaire de contact -------------------------------------------------
   Fluent Forms apporte sa propre feuille. On ne la remplace pas : on reprend
   seulement les champs, les etiquettes et le bouton, pour qu'ils parlent la
   meme langue que le reste du site. Selecteurs a deux classes, comme partout
   ici. */
.ly-page .ly-doc__formulaire {
	margin: 24px 0 0;
	max-width: 620px;
	/* Fluent Forms peint son bouton avec `var(--fluentform-primary)`, depuis une
	   regle en (0,3,1) — `form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style)`
	   — qui battait la mienne en (0,3,0). Plutot que de surencherir en
	   selecteurs, on reprend LA VARIABLE : sa propre regle peint alors en vert.
	   Les proprietes personnalisees etant heritees, la poser ici suffit. */
	--fluentform-primary: var(--lydie-green);
}

.ly-page .ly-doc__formulaire label {
	font-family: var(--lydie-texte);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lydie-ink);
}

/* 16 px minimum sur les champs : en dessous, Safari sur iPhone zoome tout seul
   a la mise au point et le visiteur se retrouve avec la page de travers. */
.ly-page .ly-doc__formulaire input.ff-el-form-control,
.ly-page .ly-doc__formulaire textarea.ff-el-form-control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lydie-ring);
	border-radius: 8px;
	background-color: var(--lydie-white);
	font-family: var(--lydie-texte);
	font-size: 16px;
	line-height: 1.5;
	color: var(--lydie-body);
	transition: border-color 150ms ease;
}

.ly-page .ly-doc__formulaire input.ff-el-form-control:focus,
.ly-page .ly-doc__formulaire textarea.ff-el-form-control:focus {
	border-color: var(--lydie-green);
	outline: 2px solid var(--lydie-green);
	outline-offset: 1px;
}

/* Meme bouton que le CTA principal du site, jusqu'au `line-height: 1.2` — sans
   lui, le 1.7 pose sur le body ajoute 9 px de haut au bouton.
   Le fond est repete ici, en (0,4,1) cette fois : si le nom de la variable
   change a une mise a jour du plugin, le bouton reste vert au lieu de repasser
   au bleu sans prevenir. */
.ly-page .ly-doc__formulaire form.frm-fluent-form .ff-btn-submit,
.ly-page .ly-doc__formulaire .ff-btn-submit {
	padding: 16px 34px;
	border: 0;
	border-radius: 999px;
	background-color: var(--lydie-green);
	color: var(--lydie-white);
	font-family: var(--lydie-condense);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.ly-page .ly-doc__formulaire form.frm-fluent-form .ff-btn-submit:hover,
.ly-page .ly-doc__formulaire form.frm-fluent-form .ff-btn-submit:focus {
	background-color: var(--lydie-green-btn-h);
	color: var(--lydie-white);
}


/* --- Deux colonnes de sections, sur grand ecran seulement ------------------
   Par defaut les deux conteneurs S'EFFACENT (`display: contents`) : leurs blocs
   redeviennent enfants directs de la colonne de lecture et se lisent dans leur
   ordre d'ecriture. C'est le rendu mobile, et c'est le comportement de repli si
   `display: contents` n'etait pas compris — une page en une colonne, jamais
   une page cassee.

   `display: contents` est pose sur de simples <div>, sans role : c'est le cas
   ou il ne pose aucun probleme d'accessibilite. */
.ly-doc__deux-colonnes,
.ly-doc__col {
	display: contents;
}


/* --- Sommaire du blog ------------------------------------------------------
   Une carte par article, dans la meme grammaire que les cartes de tarifs :
   filet fin, fond creme, rayon de 10 px.

   Le nombre de colonnes suit la LARGEUR disponible, pas le nombre d'articles :
   `auto-fit` en pose autant que la place le permet, sans jamais descendre sous
   320 px de carte. A deux colonnes fixes, les trois articles d'aujourd'hui
   laissaient une case vide en bas a droite, soit un quart de la grille.
   Un quatrieme article ne demandera aucune retouche ici. */
.ly-page .ly-doc__articles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

/* Colonne flex, et c'est l'extrait qui absorbe le vide (`flex: 1` plus bas) :
   les cartes d'une meme ligne finissent a la meme hauteur et leurs liens
   « Lire l'article » s'alignent, quelle que soit la longueur des extraits. */
.ly-page .ly-article {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px 28px 28px;
	border: 1px solid var(--lydie-line-section);
	border-radius: 10px;
	background-color: var(--lydie-cream);
}

.ly-page .ly-article__titre {
	margin: 0;
	font-size: 23px;
	line-height: 1.2;
}

/* Le titre est un lien : il garde la couleur du titre, pas celle des liens —
   c'est la carte entiere qui se lit comme cliquable. */
.ly-page .ly-article__titre a {
	color: var(--lydie-ink);
	text-decoration: none;
}

.ly-page .ly-article__titre a:hover,
.ly-page .ly-article__titre a:focus {
	color: var(--lydie-green);
}

.ly-page .ly-article__extrait {
	flex: 1;
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--lydie-muted);
}

/* `align-self` obligatoire : le lien est un `inline-block`, mais un enfant
   direct de conteneur flex est BLOQUIFIE — il devient `block`, s'etire sur
   toute la largeur de la carte, et son filet de soulignement avec lui. */
.ly-page .ly-article .ly-lien-plus {
	align-self: flex-start;
	margin-top: 18px;
}


/* --- Tarifs : libelle a gauche, prix a droite ------------------------------
   Bornee en largeur meme quand le texte courant ne l'est pas : etalee sur les
   1 280 px du bandeau, la ligne entre un libelle et son prix serait illisible.
   Selecteurs a deux classes par principe sur ce gabarit : neuf regles de
   `.ly-accueil` en (0,1,1) ou (0,1,2) ont deja mordu des composants en (0,1,0). */
.ly-page .ly-doc__tarifs {
	max-width: 620px;
	margin: 20px 0 0;
	padding: 0;
}

.ly-page .ly-doc__tarif {
	display: flex;
	gap: 24px;
	align-items: baseline;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid var(--lydie-line-section);
}

.ly-page .ly-doc__tarif dt {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--lydie-body);
}

/* Le prix est la seule information que l'oeil vient chercher : c'est le seul
   endroit de la page ou Bitter sort de son role de titre. */
.ly-page .ly-doc__tarif dd {
	flex: none;
	margin: 0;
	font-family: var(--lydie-titre-bitter);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--lydie-ink);
}


.ly-page .ly-doc__figure {
	width: fit-content;
	margin: 32px 0 0;
	border-radius: 0;
	background: none;
}

.ly-doc__figure img {
	background-color: var(--lydie-cream-alt);
}

.ly-doc__figure figcaption {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--lydie-muted);
}

/* Image dont la source est trop petite pour la colonne : elle garde une taille
   ou elle reste nette, et se cale a gauche dans le fil du texte. */
.ly-doc__figure--etroite img {
	max-width: 320px;
}


/* ===========================================================================
   Desktop >= 922 px — le portrait remonte a droite de la photo de tete
   ---------------------------------------------------------------------------
   Le portrait d'Andrew Taylor Still est ecrit dans le DOM juste avant la
   citation qu'il illustre : c'est l'ordre de lecture voulu en mobile. Aucun
   CSS ne peut deplacer un element d'un conteneur a un autre — mais une GRILLE
   peut le POSITIONNER ou l'on veut sans toucher au DOM, et sans dupliquer
   l'image (une image en double, c'est un telechargement et une annonce de
   lecteur d'ecran en trop).

   Tous les enfants prennent les deux colonnes par defaut : le texte reste
   pleine largeur, comme demande. Seuls les deux cadres photo sont places
   explicitement, sur la rangee 2 — la rangee 1 etant le H1, toujours premier
   enfant. Les blocs suivants ne peuvent pas entrer dans la rangee 2 (ses deux
   cellules sont prises) et reprennent naturellement a partir de la rangee 3.
   =========================================================================== */

@media (min-width: 922px) {

	/* Les deux conteneurs reprennent corps : les sections marquees `col2` dans
	   le contenu passent a droite, les autres restent a gauche. Chaque colonne
	   coule independamment — c'est ce que ne sait pas faire une grille posee
	   sur les blocs eux-memes. Les deux commencent par un titre de section, qui
	   porte la meme marge haute : elles s'alignent d'elles-memes. */
	.ly-doc__deux-colonnes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 64px;
		align-items: start;
	}

	.ly-doc__col {
		display: block;
		min-width: 0;
	}

	/* --- Image qui prend la hauteur restante de sa colonne -----------------
	   Sans elle, la photo gardait ses proportions carrees et descendait bien
	   plus bas que le bouton d'envoi d'en face. Une hauteur fixe aurait suffi
	   un jour donne, mais serait a remesurer au moindre champ ajoute au
	   formulaire. Ici la colonne s'etire a la hauteur de sa voisine et l'image
	   occupe ce qui reste : son bas tombe donc sur celui du bouton, quoi qu'il
	   arrive.

	   `:has()` limite tout ca aux colonnes concernees — la page Tarifs, deja
	   validee, n'est pas touchee. Et s'il n'etait pas compris, la regle est
	   simplement ignoree : on retombe sur l'image a ses proportions, jamais sur
	   une page cassee. */
	.ly-doc__deux-colonnes:has(.ly-doc__figure--remplit) {
		align-items: stretch;
	}

	.ly-doc__col:has(.ly-doc__figure--remplit) {
		display: flex;
		flex-direction: column;
	}

	.ly-page .ly-doc__figure--remplit {
		position: relative;
		flex: 1;
		/* Plancher : si la colonne d'en face etait courte, l'image ne se
		   reduirait pas a un filet. */
		min-height: 200px;
		width: auto;
	}

	/* /!\ L'image est SORTIE DU FLUX, et c'est indispensable — meme piege que
	   sur le hero de l'accueil. Une image en `height: 100%` continue d'imposer
	   sa hauteur INTRINSEQUE au calcul de la grille : la rangee se dimensionnait
	   donc sur les 608 px de la photo, et la photo remplissait ensuite cette
	   hauteur. Un cercle, ou `flex: 1` ne servait a rien. En absolu elle ne
	   participe plus au dimensionnement, c'est la colonne du formulaire qui
	   commande, et `object-fit` recadre.

	   Le cadrage remonte un peu : les deux tetes sont dans le tiers superieur,
	   un `center` les aurait coupees sur une image tres aplatie. */
	.ly-doc__figure--remplit img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 35%;
	}

	/* Le dernier groupe du formulaire porte 20 px de marge basse : sans cette
	   remise a zero, la colonne de gauche — et donc la photo — descendrait de
	   20 px sous le bouton. */
	.ly-page .ly-doc__formulaire .ff_submit_btn_wrapper {
		margin-bottom: 0;
	}

	/* La grille n'existe QUE sur les pages qui ont un portrait a remonter. Le
	   modificateur est pose par le template, qui sait si un bloc `portrait`
	   figure dans le contenu. Une page a photo unique reste en flux normal :
	   sans ce garde-fou, sa photo aurait ete coincee dans les deux tiers de
	   gauche avec un tiers vide a droite. */
	/* La repartition vient du template (`--ly-duo`), qui la prend dans une liste
	   fermee de valeurs. Deux tiers / un tiers par defaut ; a parite quand la
	   photo de tete est trop petite pour remplir les deux tiers — bornee a sa
	   taille reelle, elle laissait alors un trou entre les deux photos. */
	.ly-doc__colonne--duo {
		display: grid;
		grid-template-columns: var(--ly-duo, 2fr 1fr);
		column-gap: 24px;
		align-content: start;
	}

	.ly-doc__colonne--duo > * {
		grid-column: 1 / -1;
	}

	.ly-doc__colonne--duo .ly-doc__photo {
		grid-column: 1;
		grid-row: 2;
	}

	/* Deux tiers / un tiers : la photo de tete est le sujet du site, le portrait
	   un document d'archive — et sa source ne fait que 600 px de large, un tiers
	   de colonne la garde sous sa taille native, donc nette. */
	.ly-page .ly-doc__figure--cote {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		margin-top: 32px;
	}

	.ly-doc__figure--cote img {
		width: 100%;
		height: 420px;
		max-width: none;
		object-fit: cover;
	}
}


/* ===========================================================================
   Palier 922 - 1199 px
   =========================================================================== */

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

	.ly-doc {
		--ly-marge-doc: 48px;
		padding: 64px var(--ly-marge-doc);
	}

	.ly-doc__h1 {
		font-size: 38px;
	}

	.ly-doc__titre {
		font-size: 27px;
	}

	.ly-doc__photo img,
	.ly-doc__figure--cote img {
		height: 340px;
	}
}


/* ===========================================================================
   Mobile <= 921 px
   =========================================================================== */

@media (max-width: 921px) {

	.ly-doc {
		--ly-marge-doc: 22px;
		padding: 26px var(--ly-marge-doc);
	}

	/* Meme (0,2,1) qu'au-dessus : sans les deux classes, le `border-radius:
	   inherit` d'accueil.css reprend la main et les coins redeviennent carres. */
	.ly-page .ly-doc__photo img,
	.ly-page .ly-doc__figure img {
		border-radius: 8px;
	}

	.ly-doc__h1 {
		font-size: 28px;
		line-height: 1.15;
	}

	/* Pas de grille en mobile : le portrait reste ou il est ecrit, dans le fil,
	   juste avant la citation qu'il illustre. Il garde une largeur de portrait
	   plutot que de s'etaler sur toute la ligne. */
	.ly-page .ly-doc__photo {
		margin-top: 22px;
	}

	.ly-doc__photo img {
		height: 240px;
	}

	/* Le scotch se resserre : sur 346 px de large, une phrase de 49 signes tient
	   sur deux lignes et ne mange qu'un quart de la photo. */
	.ly-page .ly-doc__scotch {
		top: -10px;
		left: 14px;
		max-width: calc(100% - 28px);
		padding: 7px 13px;
		font-size: 15px;
	}

	.ly-doc__titre {
		margin-top: 34px;
		font-size: 23px;
	}

	.ly-doc__para {
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.65;
	}

	.ly-doc__citation {
		margin-top: 24px;
		padding-left: 16px;
		border-left-width: 2px;
	}

	.ly-doc__citation p {
		font-size: 17px;
		line-height: 1.6;
	}

	.ly-doc__source {
		font-size: 12px;
		letter-spacing: .1em;
	}

	.ly-doc__liste {
		margin-top: 16px;
		padding-left: 22px;
	}

	.ly-doc__liste li {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.65;
	}

	.ly-page .ly-doc__articles {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 22px;
	}

	.ly-page .ly-article {
		padding: 20px 20px 22px;
	}

	.ly-page .ly-article__titre {
		font-size: 20px;
	}

	.ly-page .ly-article__extrait {
		font-size: 16px;
	}

	.ly-page .ly-doc__tarif {
		gap: 16px;
		padding: 11px 0;
	}

	.ly-page .ly-doc__tarif dt {
		font-size: 16px;
	}

	.ly-page .ly-doc__tarif dd {
		font-size: 18px;
	}

	.ly-page .ly-doc__figure {
		margin-top: 24px;
	}

	/* Aucune bride sur `--cote` en mobile : une image dont la source est assez
	   grande prend toute la largeur, comme la photo de tete. C'est `--etroite`,
	   et lui seul, qui garde une image petite — parce que sa source l'est. */
	.ly-doc__figure--etroite img {
		max-width: 240px;
	}

	/* Image d'accompagnement retiree du mobile : deux grandes photos l'une sous
	   l'autre repoussaient le texte trop bas. `display: none` la sort aussi de
	   l'arbre d'accessibilite — c'est voulu, elle n'a pas de legende et son
	   contenu est deja dit par le texte. Avec `loading="lazy"`, elle n'est meme
	   pas telechargee. */
	.ly-page .ly-doc__figure--sans-mobile {
		display: none;
	}
}


/* ===========================================================================
   Photo de tete en BANDEAU, d'un bord a l'autre
   ---------------------------------------------------------------------------
   /!\ EN FIN DE FEUILLE, APRES les media queries, et c'est deliberé : les
   regles a battre — `.ly-page .ly-doc__photo img { border-radius: 10px }` et
   sa jumelle mobile a 8 px — valent (0,2,1), exactement comme celles-ci. A
   specificite egale c'est la DERNIERE ecrite qui gagne. Placees plus haut,
   elles perdaient et le bandeau gardait ses coins arrondis.

   Les marges negatives annulent exactement le padding lateral de `.ly-doc`,
   quel que soit le palier : c'est tout l'interet de la variable partagee.

   La hauteur suit la largeur (`29vw`) au lieu d'etre figee, et ce n'est pas
   cosmetique : en `cover`, une hauteur FIXE sur une largeur qui grandit reduit
   la part visible de la photo. A 420 px de haut sur 1 920 de large il ne
   restait que 39 % de la hauteur d'origine, et le museau du chiot sortait du
   cadre. 29vw donne une fenetre CONSTANTE de 51,8 % (29 x 1280 / 717) : le
   cadrage est le meme a 922 px qu'a 1 920. Bornee a 560 px pour ne pas manger
   l'ecran d'accueil, et a 240 px en bas pour rester un bandeau sur telephone.

   32 % et non le defaut 35 % : le cadre garde ainsi la photo de y=115 (haut du
   crane du chiot) a y=480 (son museau) sur les 717 px d'origine.
   =========================================================================== */

.ly-page .ly-doc__photo--bandeau {
	margin-left: calc(-1 * var(--ly-marge-doc));
	margin-right: calc(-1 * var(--ly-marge-doc));
	max-width: none;
}

.ly-page .ly-doc__photo--bandeau img {
	height: clamp(240px, 29vw, 560px);
	border-radius: 0;
	object-position: center 32%;
}