/* Yves D 17mar2025		CSS Grid version			Modification of Foundation Styling	*/	/* LWS servers: Updated file available on line after a few hours */
								/* OPPO A72		1080*2400 px /2.55	viewport 424*942	*/
								/* Honor 7S		720*1440 px	 /2 ?	viewport 360*720 ?	*/
								/* Honor 7X		1080*2160 px /3		viewport 360*720	*/
								/* Samsung A5s	1080*2340 px /2.625 viewport 412*892	*/

/* @font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}
*/
	/*	1 rem = 16px by default for most browsers, i.e. 50rem = 800px */
	/* remember  display: grid;	align-items: center;		*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}
body {
	background-color: #F7F1EA;				/* gris clair  247, 241, 234 *//*	background-image:url(../pictures/papieryb.jpg); */
	font-family: Montserrat, Verdana, sans-serif;
	font-weight: normal;
	line-height: 1.5;
	color: #0a0a0a;
	-webkit-font-smoothing: antialiased;	/* WebKit is the web browser engine for macOS, iOS, and Linux - OK for Chrome, Safari, and Firefox on a Mac */
	-moz-osx-font-smoothing: grayscale;		/* Firefox on Windows: Propriété « -moz-osx-font-smoothing » inconnue.  Déclaration abandonnée. */
}
h1, h2, h3, h4, h5, h6 {
	font-family: Montserrat, Verdana, sans-serif;
}

/* Cachons la case à cocher tout à gauche car les robots modernes détectent .checkbox {display:none}*/
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  position: absolute;
  left: -625rem;
}

.text_center {
	font-family: Montserrat, Verdana, sans-serif;	/* pour la balise audio qui semble extérieure à body */
	margin-top: 2.5rem;
	text-align: center;
}
.ital {font-style: italic;  line-height: 2.0;}	/* Same in italic, spacing*2 */

.align_right {
	text-align: right; 
}
	
.justifyselfend{justify-self: end;}

.cblue {color: #0000ff;}
.cblue_dark {color: #3D3D99;}	/* cblue était trop "agressif"	*/
.cdolphin {color: #5C5858;}	/*	gray dolphin */
.cswitch {padding: 0 0 0 10rem; color: #0000ff;}


/* Navigation */

.nav_unjour {
	position: fixed; 			/* Position the navbar at the top of the page */
	top: 0;
	width: 100%;
	z-index: 20;
 	display: grid; 
	grid-template-columns: 8rem 5.25rem 10rem 7.75rem 5rem 1fr 250px 4rem;	/* 46rem + 5 sound icons of 30+20px, right-aligned */
	color: #414149;															/* 46*16px + 250px + 4*16px = 890px			*/
	font-weight: bold;
	background-color: #F7F1EA;	/*	light grey  247, 241, 234 (override foundation-f.css 6.5.1) */
	padding: 1rem 0 0 0;		/*	top-right-bottom-left	*/
	box-shadow: 0 4px 4px #ccc;	/*	underline with grey shadow	*/
}
.nav_unjour_p {
	position: fixed; 			/* Position the navbar at the top of the page: Home, 4 novel tags + poems + contact + gallery	*/
	top: 0;
	width: 100%;
	z-index: 20;
 	display: grid; 
	grid-template-columns: 8rem 5.25rem 10rem 7.75rem 5rem 5rem 5rem 1fr 250px 4rem;	/* 46rem + 5 sound icons of 30+20px, right-aligned */
	color: #414149;															/* 46*16px + 250px + 4*16px = 986px			*/
	font-weight: bold;
	background-color: #F7F1EA;	/*	light grey  247, 241, 234 (override foundation-f.css 6.5.1) */
	padding: 1rem 0 0 0;		/*	top-right-bottom-left	*/
	box-shadow: 0 4px 4px #ccc;	/*	underline with grey shadow	*/
}

/* Links inside the navbar */
.nav_unjour a , .nav_unjour section, .nav_unjour div {
	float: left;
	display: block;
	text-align: center;
	margin: 0;
	color: #414149;
	font-weight: bold;
	text-decoration: none;
	padding-bottom: 1rem;
	/* border-bottom: 3px solid transparent; */
    border: 0px solid #414149;	/*	https://stackoverflow.com/questions/18705794/border-not-full-height-of-css-element	*/
    border-bottom-width: 0px;
    -webkit-box-shadow: -13px -8px 0px -11px #414149;
       -moz-box-shadow: -13px -8px 0px -11px #414149;	/* Firefox on Windows: Propriété « -moz-box-shadow » inconnue.  Déclaration abandonnée. */
            box-shadow: -13px -8px 0px -11px #414149;
}
.nav_unjour section:hover {
	border-bottom: 6px solid gray;
}
a:hover {
	border-bottom: 6px solid gray;
}
.active {background-color: #ABF98B;}	/*	green	*/


/*			-------------------------------				*/
/*			-------------------------------				*/
.scrmenu {
/*	background: red; /* test	*/
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));	/*	19rem 304 pixels	*//* 5 cards of 30+20px, right-aligned */
}
.cminir {
	float: left;
	margin: 1rem;
	max-width: 100%;
	border-radius: 3px;
	-webkit-box-shadow:  4px 4px 4px #ccc;	/*				*/
	   -moz-box-shadow:  4px 4px 4px #ccc;	/* Firefox on Windows: Propriété « -moz-box-shadow » inconnue.  Déclaration abandonnée. */
		    box-shadow:  4px 4px 4px #ccc;	/*				*/
	line-height: 0;						/*									*/
	min-height: 4rem;
	justify-self: center;
	transform: scale(1);
	transition: all 0.5s ease-in-out;
}

/*			-------------------------------				*/
/*			-------------------------------				*/

.imgfloat {
	float: left;
	margin: 0 20px 0 0;
}
.icons {
	grid-column: 7;
}
.icons_8 {
	grid-column: 8;
}
.icons_9 {
	grid-column: 9;
}
.tune {
	width: 100%;
	z-index: 21;
 	display: grid; 
	grid-template-columns: 36rem 1fr 250px 4rem;	/* comme nav_unjour */
/*	color: #414149;
/*	background-color: #F7F1EA;	/*	light grey  247, 241, 234 (override foundation-f.css 6.5.1) */
	padding: 4rem 0 0 4rem;		/*	top-right-bottom-left	*/
	margin: 0;
	font-weight: normal;
	font-size: small;
}

/*			Entry Points from bottom of pages		*/
/*													*/
#ENT::before { 				/*	Make anchor link go 3rem above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " ";  			/*	!!! conficts with css grid !!!		*/
  margin-top: -3rem; 
  height: 3rem; 
  visibility: hidden; 
  pointer-events: none;
}
#Groix::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Marché::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Rose::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Langue::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Cerises::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Pas_de_deux::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Choses::before {
  display: block;
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}
#Auteur::before { 			/*	Make anchor link go 80px above id	*/
  display: block;  			/*	with invisible pseudo-element		*/
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}



a {	/*	from foundation-f.css 6.5.1		*/
  line-height: inherit;
  color:  #414149;			/* was #2ba6cb;	
  text-decoration: none;*/
  
  cursor: pointer; }

/*  a:hover, a:focus {
    color: #000000; }		was #258faf	*/
  a img {
    border: 0; }

.double, .novel_3col {
	display: grid;
	grid-template-columns: 1fr minmax(10rem, 50rem) 1fr;	/*	central column hosts text - 50rem = 800px by default	*/
	grid-gap: 1.25rem;
	margin-top: 50px;
}

/* adaptative poster display */
.poster_3col {
	display: grid;
	grid-template-columns: 9rem minmax(400px, 1fr) 5rem;	/*	central column hosts poster	*/
	/*justify-self: center;	*/
	text-align: center;
	grid-gap: 1rem;
}

/*
.poster_grid {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));	/*	only one item: expands to fill the container width	*/
	/*text-align: center;
	/*align-items: center;
	/*margin: 2%;	*/
	/*margin: 1.25rem auto;	*//*	top-bottom & left-right	*/
	/*grid-gap: 1rem;
}
*/
/*
.poster_grid a {color: #000000;}	/* Mouse hovering is hidden */

.bottom-navbar {
	display: grid;
    grid-template-columns: 10rem 5rem 9rem repeat(3, 1fr);	/* Copyright, top-arrow, link to other texts, 3 likes 	1fr or minmax(1fr, 100px)?	11mar2025 */
    grid-gap: 2rem;
	align-items: center;
/*	grid-gap: 1rem;
	margin-top: 2px;
	text-align: center;	*/
}
.heart {					/* 1 column, 2 lines for like button & counter */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 60px);	/* 150px or minmax(100px, 1fr) row height*/
}

.triple, .novel_4col {
	display: grid;
	grid-template-columns: 1fr 27rem minmax(10rem, 30rem) 1fr;	/*	2 central columns host haiku and gogyōka	*/
	grid-gap: 10rem;
	margin-top: 20px;
}

.novel-text {
	margin-left: 0rem;
	margin-right: 0rem;
}

.sidemenu, .topmargin_10 {							/*	on column #3	*/
	margin: 10rem 0rem 0rem 0rem;	/* top right bottom left */
}

/*	phones < 400 px	*/
@media screen and (max-width: 25em) {
	.nav_unjour { grid-template-columns: 5rem 4rem 6rem 5rem 4rem 1fr;	/* PC : 8rem 5.25rem 10rem 7.75rem 5rem 5rem 5rem 1fr 250px 4rem */
				padding-left: 1rem;
				font-size: small;
			}
	.icons	{grid-row : 2;
			grid-column : 1/6;}
	.double, .novel_3col {
	grid-template-columns: 8rem minmax(400px, 1fr) 1rem;	/*	central column hosts poster	*/
			/*grid-template-columns: 1fr;
				margin-left: 1.25rem;	*/
			font-size: small;
			}
}


.novel_head, .top_05 {
	margin-top : 5%;
}

.indent_haibun {padding-left: 10rem;}

.thumbnaily {
	border-radius: 3px;					/*									*/
	-webkit-box-shadow:  4px 4px 4px #ccc;	/*				*/
	   -moz-box-shadow:  4px 4px 4px #ccc;	/* Firefox on Windows: Propriété « -moz-box-shadow » inconnue.  Déclaration abandonnée. */
		    box-shadow:  4px 4px 4px #ccc;	/*				*/
	margin-bottom: 1rem;
}
	
.align-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
		  
li {
	display: inline;
	list-style: none; /* pour enlever les puces sur IE7 */
	margin: 1rem;
}

.hiddenhover a {color: #000000;}	/* Mouse hovering is hidden */

.hiddenhoveri a {color: #000000; font-style: italic;  line-height: 2.0;}	/* Same in italic, spacing*2 */

*[onclick] {cursor:pointer;}

#publi {
  display: block;
  font-size: small;
  font-weight: lighter;
}

.coinbleu {
	background-color:#F4F6FF;
	border:1px solid #B5B9C9;
	padding:5px;
	margin: 100px 10px 30px 10px;
	border-radius:10px;		/*arrondir les coins */
	/* color: #0000ff; color: #8B4513; color: #811453; color: #404040; */
}

.coinbrun {
	background-color:#FFFFF8;
	border:1px solid #CFCFBE;
	padding:5px;
	margin: 30px 10px;
	border-radius:10px;		/*arrondir les coins */
}

.coinviolet {
	background-color:#FFEFFF;
	border:1px solid #D4BCD4;
	padding:5px;
	margin: 30px 10px;
	border-radius:10px;		/*arrondir les coins */
}

.coingris {
	background-color:#EEEEEE;
	border:1px solid #C7C1C1;
	padding:5px;
	margin: 30px 10px;
	border-radius:10px;		/*arrondir les coins */
}

.header {
	text-align: left;
	color: #0000ff;
	padding: 0.5rem;	margin: 0.2rem;
	font-size: 1.5rem;
	font-weight: bold;
}

.carr {
	display: none;
}

.cnovel {
	/*	display: inline-block;	*/		/*	from foundation/zurb.com 6.5.1	*/
	max-width: 100%;					/*	.thumbnail						*/
	margin-bottom: 1rem;				/*									*/
	/*border: 4px solid #fefefe;		/*									*/
	border-radius: 3px;					/*									*/
	-webkit-box-shadow:  4px 4px 4px #ccc;	/*				*/
	   -moz-box-shadow:  4px 4px 4px #ccc;	/* Firefox on Windows: Propriété « -moz-box-shadow » inconnue.  Déclaration abandonnée. */
		    box-shadow:  4px 4px 4px #ccc;	/*				*/
	line-height: 0;						/*									*/
	grid-column-start: auto;
	grid-column-end: span 1;
	min-height: 4rem;
	justify-self: center;
	transform: scale(1);
	transition: all 0.3s ease-in-out;
}
.enlarged {					/*	enlarge by 8%	*/
	transform: scale(1.08);
}

#image_back {
	position: relative;
	width: 400px;
	height: 270px;
	background-image:url(../pictures/grey_body50_400.png);
	box-shadow:  0 0 20px 20px grey;
}
#image_top {
	position: absolute;
	width: 400px;
	display: flex;
	justify-content: center;
	top: 35px;
}

.blurred {box-shadow:  0 0 20px 20px grey;}

@keyframes blow {
	0% {width: 250px; height: 200px;}
	46% {width: 250px; height: 200px;}
	48% {width: 300px; height: 200px;}
	50% {width: 250px; height: 200px;}
	84% {width: 250px; height: 200px;}
	92% {width: 400px; height: 200px;}
	100% {width: 250px; height: 200px;}
}

.draught {					/*	move curtains	*/
	animation: blow 60s ease-in-out infinite;
}




.flex_and_center {
	display: flex;
	justify-content: center;
}




.nov_card_bunch5 {
	display: grid; 
	grid-template-columns: 20rem repeat(auto-fit, minmax(17rem, 1fr));	/* 17rem 270px */
	grid-gap: 0.5rem;
	grid-row-gap: 1.8rem;
	margin-top: 100px;
}

.nov_card_bunch_zoom3 {
	grid-template-columns: 20rem repeat(auto-fit, minmax(22rem, 1fr));
	grid-gap: 1.5rem;
	grid-row-gap: 2.5rem;
}

.leftside {
	grid-column: span 1;
	grid-row: 1 / span 4;
	padding: 0.5rem;
	margin: 0.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	border: 4px solid #fefefe;			/*									*/
	border-radius: 3px;					/*									*/
	-webkit-box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);	/*				*/
		box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);		/*				*/
}

.nov_card_bunch4 {
	display: grid; 
	grid-template-columns: 20rem repeat(3,1fr);
	grid-gap: 0.5rem;
	grid-row-gap: 1.8rem;
}

.nov_card_bunch_zoom2 {
	grid-template-columns: 20rem repeat(2,1fr);
}

.nov_lead_jpg {
	display: grid; 
	grid-template-columns: 10rem repeat(auto-fit, minmax(10rem, 16rem)); /*	(auto-fit , pas )) 1fr; 	*/
	grid-gap: 2rem;
	align-items: center;
/*	grid-row-gap: 5rem;	*/
}

.novel_grid {
	display: grid; 
	grid-template-columns: minmax(20rem, 1fr) minmax(9rem, 18rem);	/* 70% 30%;		was repeat(auto-fit, minmax(30rem, 1fr))	*/
/*	margin: 1.25rem;	*/		/*	vertical horizontal	*/
	grid-gap: 1.0rem;	
}

.haiku_grid {
	display: grid; 
	grid-template-columns: 18rem 12rem;	/* 70% 30%;		was repeat(auto-fit, minmax(30rem, 1fr))	*/
	margin: 5rem 0rem;			/*	vertical horizontal	*/
	grid-gap: 1.0rem;	
}

.gogyoka_grid {
	display: grid; 
	grid-template-columns: 19rem 10rem;	/* 70% 30%;		was repeat(auto-fit, minmax(30rem, 1fr))	*/
	margin: 5rem 0rem;			/*	vertical horizontal	*/
	grid-gap: 1.0rem;	
}

.movingimg {
	position: relative; top: 0rem; right: 0rem; overflow: hidden;
	transform: scale(1);
	transition: all 5s ease-in-out 10s;
}
.enlargeds {				/*	make item 30% smaller and shift it	*/
	transform: scale(0.7);
	right : 7rem;
	top : 3rem;
	transition-property: right, transform, top;
	transition-duration: 5s, 5s, 7s;
	transition-delay: 5s, 5s, 5s;
	transition-timing-function: ease;
}

.cnovelmin {
	margin: 5rem 1.25rem;	/* top-bottom & left-right	*/
}

.comment	{
	display: grid;
	grid-template-columns: 8rem 20% 1fr;
}
.sent	{
	font-weight: bold;
	color: #0000ff;
}

.heroes_focus {							/* pour Fragile Rencontre	*/
	display: grid;
	grid-template-columns: 1fr 12rem 12rem;
}

.callout {
  position: relative;
  margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 5px;
  background-color: white;
  color: #0a0a0a; }

.callout a {
	text-decoration: none;
}
	
#hanzi {
  font-size: xx-large;
  font-weight: bold;
  color: navy;
  text-align: center;
}

.prefer {
	  background-color: lightblue;
}

/* Like Button	*/
.btn-like {
	margin: 4px 4px;
    text-align: center;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
    padding: 12px 10px;
    font-size: 24px;
    cursor: pointer;
    border: none;
    outline: none;
    color: pink;
    text-decoration: none;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.btn-like:hover {
	  transform: translateY(-5px);
}
.btn-liked {
	  color: #ed2553; /* red */
}

.animate-like {
	animation-name: likeAnimation;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-duration: 1.0s;
}
@keyframes likeAnimation {
  0%   { transform: scale(5); }
  100% { transform: scale(1.5); }
}
.center-count {
	width: 100%;
	text-align: center;
}

.wth_contain { 				/* Weather container */
  text-align: center;
  height: 13rem;
  background: rgb(251, 242, 133);
  background: radial-gradient(
    circle,
    rgba(251, 242, 242, 0.6334908963585435) 0%,
    rgba(224, 196, 242, 0.8407738095238095) 20%,
    rgba(230, 224, 230, 0) 40%
  );
}

#location {
  font-size: 1.0rem;
  font-weight: 800;
  font-style: italic;
}

.desc {
	font-size: 0.75rem;
	text-transform: capitalize;
}

.circle {
	background-color: black;
	display: inline-block;
	position: relative;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	margin: 5px 15px 0;
}
.circle_day {background-color: white;}