/* Couleurs  */
:root {
	--terracotta-color:#cb6843;
	--vert-color:#053714;
	--creme-color:#FFEDDF;
	--violet-color:#694873;
	--parme-color:#9d545f;
}

#foo {
	color: var(--creme-color);
	var(--terracotta-color)
	var(--vert-color)
	var(--violet-color)
}
  
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	overflow: hidden;
	font-family: 'Georgia', serif;
}

.container {
	position: relative;
	width: 100%;
	height: 100vh;
}

	/* ══════════════════════════════════════════
		DESKTOP / TABLETTE (> 600px)
		Séparation verticale oblique
		Ligne : (55%, 0) → (45%, 100%)
	══════════════════════════════════════════ */
@media (min-width: 600px) {
	.left {
		align-items: center;
		clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
	}
	
	.right {
		align-items: center;
		clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
	}
	
	.left .content  { margin-right: 50%; }
	.right .content { margin-left: 50%; }

	.page-title {
		padding:1rem 2rem 0.5rem 3vw;
		font-size: clamp(1.2rem, 3vw, 2.2rem);
		font-weight: 700;
		text-align:left;
		letter-spacing: 0.18em;
		border-bottom: 2px solid var(--creme-color);
		border-right: 2px solid var(--creme-color);
		border-radius: 12px;
	}
    
	.page-notice {
		padding:1rem 3vw 0.5rem 2rem;
		right:0;
		font-size: clamp(0.95rem, 1.25vw, 1.1rem);
	}

}
	/* ══════════════════════════════════════════
		border-right: 2px solid var(--creme-color);
		Styles communs
	══════════════════════════════════════════ */

.left {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: var(--terracotta-color);
	display: flex;
	justify-content: center;
	z-index: 0;
   
}

.right {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: var(--creme-color);
	display: flex;
	justify-content: center;
	z-index: 1;
   
}

.left .content > a:link, .left .content > a:visited { color: var(--creme-color);  }
.right .content > a:link, .right .content > a:visited { color: var(--terracotta-color);  }

.content {
	text-align: center;
	padding: 2rem;
}
    
.content > a {
	text-decoration: none;
}
    
.left .content > a:hover, .left .content > a:active,
.right .content > a:hover, .right .content > a:active {
	color: var(--violet-color);
}

.page-title {
	color: var(--creme-color);
		position: absolute;
		top: 0;
		left: 0;
		text-align:right;
		z-index: 10;
		text-transform: uppercase;
		pointer-events: none;
	}

	.page-notice {
		color: var(--terracotta-color);    	
		position: absolute;
		bottom:0;
		z-index: 10;
		font-style: italic;      	
	}

	h1 {
		font-size: clamp(1.6rem, 4vw, 3.5rem);
		font-weight: 400;
		letter-spacing: 0.05em;
		line-height: 1.1;
		margin-bottom: 1rem;
	}

	p {
		font-size: clamp(1rem, 1.5vw, 1.4rem);
		line-height: 1.7;
		margin: 0 auto 0.5em;
		/*opacity: 0.9;*/
	}
    
	@media (max-width: 600px) {
		p {
			max-width: 80wh;	
		}
	}

	@media (min-width: 601px) and (max-width: 1199px)  {
		p {
			max-width: 24ch;
		}
	}  
	    
	@media (min-width: 1200px) {
		p {
			max-width: 36ch;
		}
	}  

	.tag {
		display: inline-block;
		font-size: 0.7rem;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		margin-bottom: 1.5rem;
		opacity: 0.5;
	}

/* ══════════════════════════════════════════
	SMARTPHONE (≤ 600px)
	Séparation horizontale oblique
	Ligne : (0%, 45%) → (100%, 55%)
	— même sens pour les deux blocs —
══════════════════════════════════════════ */

@media (max-width: 600px) {

/* Le bloc "haut" (Nuit) couvre la moitié supérieure.
Sa bordure basse suit la diagonale : (0, 45%) → (100%, 55%)
	On place le contenu à 25% du haut = centre de la zone visible */
	.left {
		clip-path: polygon(0 0, 100% 0, 100% 55%, 0 45%);
		align-items: flex-start;
		justify-content: center;
		padding-top: 12vh;
	}

/* Le bloc "bas" (Jour) couvre la moitié inférieure.
	Sa bordure haute reprend exactement la même diagonale
	On place le contenu à 75% du haut = centre de la zone visible */
	.right {
		clip-path: polygon(0 45%, 100% 55%, 100% 100%, 0 100%);
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 16vh;
	}

/* Annule les décalages horizontaux du mode desktop */
	.left .content  { margin-right: 0; }
	.right .content { margin-left: 0; }

	h1   { 
		font-size: clamp(1.4rem, 6vw, 2rem);
	}
	p    { 
		font-size: 1rem; 
	}
	
	.page-title, .page-notice {
		display: block;
		width: 100%;
		text-align: center;
	}

	.page-title {
		top: 0;
		padding: 0.6rem 1rem;
		font-size: clamp(1rem, 3.5vw, 1.2rem);
		font-weight: 400;
		letter-spacing: 0.35em;
		border-bottom: 1px solid  var(--creme-color);
	}
      
	.page-notice {
		bottom:5px;
		font-size: 0.9rem; 
	}
        
	.content {
		text-align: center;
		width:80%;
	}
}

@media (max-width: 451px) {
	.left {
		padding-top: 8vh;
	}
	.right {
		*/padding-bottom: 16vh;*/
	}
	.left .content {
		padding-top: 1rem;
		padding-left:0;
		padding-right: 0;	
	}
}