/* Liste des brèves (breves-generator.php) : tuiles en liens, et la brève ouverte dans un <dialog> (js/breves.js,
   contenu dans breve-generator.php ; ids et classes « bv » propres à la fenêtre).
   Le reste de la liste est dans styleMobile2/Desktop2/Wide2.css.
   Fenêtre : mobile d'abord (plein écran, photo en haut), une boîte de 600 px à partir de 500 px, puis photo et texte
   côte à côte à partir de 1000 px (le titre se lit sans faire défiler). Mêmes codes que /carnet-de-bord : encre
   #1e1e25, or #8f6200 / #c99a12, crème #fbebc5, coins arrondis, pastilles. */

/* Tuiles en <a> (c'étaient des <button>) : même rendu */
a.brevesImage {
	color: #FFF;
	text-align: left;
}

@media screen and (min-width: 500px) {
	a.brevesImage {
		overflow: hidden;
		vertical-align: top;
	}
	a.brevesImage img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
}


/****************** La fenêtre ******************/

#breveDialog {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	color: #1e1e25;
	overflow: auto;
	overscroll-behavior: contain;
	outline: none;
}
#breveDialog::backdrop { /* Transparent sur iPhone : un voile sombre fait clignoter les barres de Safari */
	background: transparent;
}
html:has(#breveDialog[open]) { /* La liste ne défile pas sous la brève */
	overflow: hidden;
}


/* Photo, et les boutons ronds posés dessus */

#bvPhoto {
	position: relative;
	background: #f5f2ea;
}
#bvPhoto img {
	display: block;
	width: 100%;
	height: auto;
}
.bvRond {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(30, 30, 37, .48);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, color .2s, transform .2s;
}
.bvRond svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bvRond:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: 2px;
}
.bvFleche {
	position: absolute;
	top: 50%;
	margin-top: -21px;
}
#bvPrec {
	left: 12px;
}
#bvSuiv {
	right: 12px;
}
#bvFermer { /* Reste à portée quand on descend dans les commentaires */
	position: fixed;
	z-index: 2;
	top: calc(12px + env(safe-area-inset-top));
	right: 12px;
}


/* Texte de la brève */

#bvTete {
	padding: 24px 20px 30px;
}
#bvDate {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8f6200;
}
#bvTitre { /* h1 : rien des marges des titres de page */
	margin: 0;
	padding: 0;
	font-size: 29px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.8px;
	color: #1e1e25;
	text-align: left;
	text-wrap: balance;
}
#bvLegende {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.4;
	color: #3a3a42;
}
#bvCredit { /* Filet or, puis « Crédit » et le nom en italique fine */
	display: flex;
	align-items: baseline;
	margin-top: 14px;
	font-size: 16px;
	font-weight: 300;
	font-style: italic;
	color: #3a3a42;
}
#bvCredit::before {
	content: '';
	flex: none;
	align-self: center;
	width: 24px;
	height: 1px;
	margin-right: 10px;
	background: #c99a12;
}
#bvCredit .brevesCreditMot {
	margin-right: 6px;
}
#bvCredit a { /* Lien Instagram : souligné or */
	color: #1e1e25;
	text-decoration: underline;
	text-decoration-color: #eeb315;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

#bvLien { /* Pièce similaire : un encart crème, cliquable en entier (le ::after du lien le couvre) */
	position: relative;
	margin-top: 22px;
	padding: 14px 46px 15px 18px;
	background: #fbebc5;
	border-radius: 18px;
	font-size: 16px;
	line-height: 1.4;
	color: #3a3a42;
	transition: background-color .2s;
}
.bvLienMot {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8f6200;
}
#bvLien a {
	font-weight: 600;
	color: #1e1e25;
}
#bvLien a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
#bvLien a:focus-visible {
	outline: none;
}
#bvLien a:focus-visible::after {
	outline: 3px solid #eeb315;
	outline-offset: 2px;
}
#bvLien svg {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	fill: none;
	stroke: #8f6200;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s;
}

#bvCompteurs { /* Partages Facebook et commentaires, en pastilles */
	display: flex;
	gap: 8px;
	margin-top: 22px;
}
.bvCompteur {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	margin: 0;
	padding: 0 14px 0 12px;
	background: #fff;
	border: 1.5px solid #e4e4ea;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #3a3a42;
	cursor: pointer;
	transition: border-color .2s;
}
.bvCompteur:focus-visible {
	outline: 3px solid #eeb315; /* styleMobile2.css retire le contour de tous les boutons */
	outline-offset: 2px;
}
.bvCompteur svg {
	width: 17px;
	height: 17px;
}
.bvFacebook {
	fill: #345190;
}
.bvBulle {
	fill: none;
	stroke: #3a3a42;
	stroke-width: 1.8;
	stroke-linejoin: round;
}


/* Commentaires (styles des articles, resserrés dans la fenêtre) */

#breveDialog #articleCommentairesContainerBig {
	padding-top: 34px;
	scroll-margin-top: 0;
}
#breveDialog #brevesLightboxPart2 .articleCommentairesTitre.hideMobile { /* Redit « N commentaires » juste au-dessus */
	display: none;
}
#breveDialog #articleCommentairesAddContainerGlobal {
	min-height: 0;
}
#breveDialog #brevesLightboxPart2 .articleCommentairesTitre {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.5px;
}
#bvTeteComms { /* Titre « N commentaires » + bouton admin à droite ; même écart qu'entre deux commentaires */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}
#breveDialog #brevesLightboxPart2 .titreMedium { /* Sans le padding-bottom de .homeTitre */
	margin: 0;
	padding-bottom: 0;
	text-align: left;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -.6px;
	white-space: nowrap;
}
#bvCouperComms button { /* Bouton admin : icône seule, le texte est lu par les lecteurs d'écran et en infobulle */
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1.5px solid #e4e4ea;
	border-radius: 50%;
	color: #8a8a93;
	cursor: pointer;
}
#bvCouperComms button:focus-visible {
	outline: 3px solid #eeb315;
	outline-offset: 2px;
}
#bvCouperComms svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bvMasque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* iPhone : photo nue, flèches et croix dans une barre blanche au-dessus, qui défile avec la brève.
   Flèches à place fixe : → ne bouge pas quand il n'y a pas de brève plus ancienne. */

@media screen and (max-width: 499px) {
	#breveDialog { /* Pas de rebond élastique en haut ni en bas */
		overscroll-behavior: none;
		/* Bande blanche au-dessus de la fenêtre : barre de Safari réduite (après avoir fait défiler la liste), la zone de
		   l'heure et de la batterie laissait voir la liste derrière. Retirée quand on tire la brève vers le bas (breves.js). */
		box-shadow: 0 -150px 0 #fff;
	}
	#bvPhoto {
		padding-top: calc(58px + env(safe-area-inset-top));
		background: #fff;
	}
	#bvPhoto::before { /* Fond de la barre */
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		height: calc(58px + env(safe-area-inset-top));
		background: #fff;
		border-bottom: 1px solid #f0ede6;
	}
	#bvPhoto .bvRond {
		position: absolute;
		z-index: 3;
		top: calc(9px + env(safe-area-inset-top));
		width: 40px;
		height: 40px;
		margin: 0;
		background: #f3f1ec;
		color: #1e1e25;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	#bvPhoto .bvRond svg {
		width: 20px;
		height: 20px;
	}
	#bvPrec {
		left: 12px;
	}
	#bvSuiv {
		left: 60px;
		right: auto;
	}
	#bvPhoto #bvFermer {
		right: 12px;
		background: #1e1e25;
		color: #fff;
	}
}


/* Carrousel (js/breves.js) tant que la photo est au-dessus du texte : la photo suit le doigt à l'horizontale, la page
   défile à la verticale ; la brève voisine arrive à côté, cachée hors du cadre */
@media screen and (max-width: 999px), screen and (max-height: 559px) {
	#bvPhoto {
		overflow: hidden;
	}
	#bvPhoto > img {
		touch-action: pan-y;
		-webkit-user-drag: none;
		user-select: none;
		-webkit-user-select: none;
	}
}


@media (hover: hover) {
	.bvRond:hover {
		background: rgba(30, 30, 37, .7);
	}
	#bvLien:hover {
		background: #f8e1a6;
	}
	#bvLien:hover svg {
		transform: translateX(3px);
	}
	.bvCompteur:hover,
	#bvCouperComms button:hover {
		border-color: #c99a12;
	}
	#bvCouperComms button:hover {
		color: #3a3a42;
	}
}


/* Ordinateur : une boîte de 600 px sur un voile sombre */

@media screen and (min-width: 500px) {
	#breveDialog {
		width: 600px;
		height: calc(100% - 40px);
		margin: 20px auto;
		border-radius: 18px;
	}
	#breveDialog::backdrop {
		background: rgba(20, 20, 26, .82);
	}
	#breveDialog[open], #breveDialog[open]::backdrop { /* Opacité seulement : une transformation déplacerait les boutons en position fixe */
		animation: breveDialogApparait .25s ease-out;
	}
	@keyframes breveDialogApparait {
		from { opacity: 0; }
	}

	#bvPhoto img { /* Le titre reste visible sous la photo (bandes crème si elle est plus étroite) */
		max-height: 62vh;
		object-fit: contain;
	}
	#bvFermer { /* Coin haut droit de la boîte */
		top: 34px;
		right: calc(50% - 300px + 14px);
	}
	#bvTete {
		padding: 30px 40px 34px;
	}
	#bvTitre {
		font-size: 34px;
		letter-spacing: -1px;
	}
	#breveDialog #brevesLightboxPart2 .colonneCentrale {
		padding: 0 40px;
	}
}


/* Grand écran : photo à gauche (sur toute la hauteur, largeur selon son format), texte et commentaires à droite dans
   une colonne qui défile. Flèches de part et d'autre de la boîte, croix dans le coin de l'écran. */

@media screen and (min-width: 1000px) and (min-height: 560px) {
	#breveDialog {
		--hauteur: min(calc(100vh - 64px), 940px);
		display: flex;
		width: fit-content;
		height: var(--hauteur);
		margin: auto;
		background: transparent;
		overflow: visible; /* Les flèches sont posées à côté de la boîte */
	}
	#breveDialog:not([open]) {
		display: none;
	}
	#breveDialogCorps, #breveContenu {
		display: contents;
	}
	#bvPhoto {
		position: static;
		flex: none;
		height: var(--hauteur);
		border-radius: 18px 0 0 18px;
		overflow: hidden;
	}
	#bvPhoto img {
		width: auto;
		max-height: none;
		max-width: calc(100vw - 600px); /* Il reste toujours la place du texte et des flèches */
		height: 100%;
		object-fit: contain; /* Une photo d'un autre format n'est jamais rognée */
	}
	#bvTexte {
		flex: none;
		width: 440px;
		height: var(--hauteur);
		overflow-y: auto;
		overscroll-behavior: none; /* Pas de rebond élastique en haut ni en bas de la colonne */
		background: #fff;
		border-radius: 0 18px 18px 0;
	}
	#bvTete {
		padding: 44px 40px 34px;
	}

	.bvRond {
		width: 52px;
		height: 52px;
		background: rgba(255, 255, 255, .12);
	}
	.bvRond svg {
		width: 24px;
		height: 24px;
	}
	.bvFleche {
		margin-top: -26px;
	}
	#bvPrec {
		left: -80px;
	}
	#bvSuiv {
		right: -80px;
	}
	#bvFermer {
		top: 20px;
		right: 24px;
	}
}
@media (hover: hover) and (min-width: 1000px) and (min-height: 560px) {
	.bvRond:hover {
		background: #fff;
		color: #1e1e25;
	}
}


/* ESSAI (20 oct) : rectangle blanc qui reste en haut ~0,5 s après la fermeture d'une brève sur iPhone (Safari colore la
   zone de l'heure d'après la fenêtre blanche, avec retard). Activé par /breves?essai=E (breves.js). À retirer.
   La fenêtre commence 8 px plus bas → Safari ne la voit pas en haut et ne colore rien. La zone de l'heure est peinte par
   une bande blanche posée dans la page (breves.js), qui disparaît avec la fenêtre, sans retard. */
@media screen and (max-width: 499px) {
	html.essaiE #breveDialog {
		top: 8px;
		height: calc(100% - 8px);
	}
	html.essaiE #breveDialog::backdrop { /* Le fond transparent couvre aussi le haut de l'écran : Safari le verrait */
		top: 8px;
	}
}