/* ***************************************************************************
 * Page d'accueil : bandeau en diaporama, expertises, equipe, bandeau Instagram
 * (index.php, bloc_expertises.php, bloc_equipe.php, bloc_instagram.php)
 *
 * Fichier separe de main.css, qui est compile depuis des sources SCSS
 * absentes du depot : une recompilation ecraserait ces regles.
 * Charge apres main.css via /css/css_urls.
 * *************************************************************************** */

/* ***************************************************************************
 * Bandeau : diapos superposees, fondu enchaine (index.php)
 * *************************************************************************** */

.imageunique .iimg .diapo
	{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:0;
	transition:opacity 1.6s ease;
	}

.imageunique .iimg .diapo.actif
	{
	opacity:1;
	}

.imageunique .iimg .diapo img
	{
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover;
	}

/* Leger recul de l'image pendant qu'elle est affichee */
.imageunique .iimg .diapo.actif img
	{
	animation:diapo_recul 9s ease-out both;
	}

@keyframes diapo_recul
	{
	from	{ transform:scale(1.06); }
	to		{ transform:scale(1); }
	}

@media (prefers-reduced-motion: reduce)
	{
	.imageunique .iimg .diapo
		{
		transition:none;
		}

	.imageunique .iimg .diapo.actif img
		{
		animation:none;
		}
	}

/* "Plus de criteres" pose sur la photo : pastille claire, lisible sur toutes les diapos */
.imageunique .recherche_accueil .rch_plus
	{
	padding:6px 14px;
	border-radius:50vh;
	background:rgba(255,255,255,.92);
	}

/* ***************************************************************************
 * Nos expertises immobilieres (bloc_expertises.php)
 * *************************************************************************** */

main > section.expertises
	{
	width:100%;
	margin:0 auto;
	}

.expertises .head .tit
	{
	margin:100px auto 50px;
	font-size:4rem;
	font-weight:300;
	text-align:center;
	}

/* Six colonnes : deux tuiles larges sur la premiere ligne, trois sur la seconde */
.expertises .exp_grille
	{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:4px;
	margin:0;
	padding:0;
	list-style:none;
	}

.expertises .exp_tuile
	{
	position:relative;
	grid-column:span 2;
	height:clamp(240px,26vw,400px);
	overflow:hidden;
	list-style:none;
	}

.expertises .exp_tuile.exp_large
	{
	grid-column:span 3;
	height:clamp(280px,32vw,480px);
	}

.expertises .exp_tuile a,
.expertises .exp_sanslien
	{
	display:block;
	width:100%;
	height:100%;
	padding:0;
	color:#fff;
	font-size:inherit;
	}

.expertises .exp_tuile img
	{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover;
	transition:transform .9s ease;
	}

/* Degrade en bas de tuile : le libelle reste lisible sur toutes les photos */
.expertises .exp_tuile a::after,
.expertises .exp_sanslien::after
	{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 70%);
	}

.expertises .exp_nom
	{
	position:absolute;
	left:0;
	right:0;
	bottom:9%;
	z-index:1;
	padding:0 16px;
	font-size:clamp(1.8rem,1.9vw,2.6rem);
	font-weight:300;
	letter-spacing:.05em;
	line-height:1.2;
	text-transform:uppercase;
	text-align:center;
	color:#fff;
	}

.expertises .exp_nom::after
	{
	content:"";
	display:block;
	width:40px;
	height:1px;
	margin:12px auto 0;
	background:#fff;
	transition:width .4s ease;
	}

.expertises .exp_tuile a:hover img
	{
	transform:scale(1.05);
	}

.expertises .exp_tuile a:hover .exp_nom::after
	{
	width:90px;
	}

.expertises .exp_tuile a:focus-visible
	{
	outline:3px solid #d8252c;
	outline-offset:-3px;
	}

/* ***************************************************************************
 * Notre equipe (bloc_equipe.php)
 * *************************************************************************** */

main > section.equipe_accueil
	{
	display:grid;
	grid-template-columns:minmax(0,5fr) minmax(0,6fr);
	gap:clamp(30px,6vw,100px);
	align-items:center;
	margin:120px auto 40px;
	}

.equipe_accueil .eqa_photo
	{
	position:relative;
	}

/* Equerre rouge decalee sous la photo */
.equipe_accueil .eqa_photo::before
	{
	content:"";
	position:absolute;
	left:-18px;
	bottom:-18px;
	width:45%;
	height:45%;
	border-left:1px solid #d8252c;
	border-bottom:1px solid #d8252c;
	}

.equipe_accueil .eqa_photo img
	{
	position:relative;
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1 / 1;
	-o-object-fit:cover;
	object-fit:cover;
	}

.equipe_accueil .eqa_surtitre
	{
	margin:0 0 14px;
	font-size:1.3rem;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#d8252c;
	}

.equipe_accueil h2
	{
	margin:0 0 28px;
	font-size:clamp(2.6rem,2.6vw,3.6rem);
	line-height:1.2;
	text-align:left;
	}

.equipe_accueil .eqa_texte p
	{
	margin:0 0 18px;
	font-size:1.6rem;
	line-height:1.7;
	color:#333;
	}

.equipe_accueil .eqa_texte p.eqa_surtitre
	{
	font-size:1.3rem;
	line-height:1.4;
	color:#d8252c;
	}

/* Texte saisi dans le back-office : la phrase de conclusion est mise en italique */
.equipe_accueil .eqa_contenu em
	{
	color:#000;
	}

.equipe_accueil .eqa_contenu > :last-child
	{
	margin-bottom:0;
	}

.equipe_accueil .eqa_bouton
	{
	display:inline-flex;
	align-items:center;
	margin:30px 0 0;
	padding:13px 30px;
	border-radius:50vh;
	background:#000;
	color:#fff;
	font-size:1.35rem;
	font-weight:500;
	letter-spacing:.08em;
	text-transform:uppercase;
	}

.equipe_accueil .eqa_bouton:hover
	{
	background:#d8252c;
	color:#fff;
	}

.equipe_accueil .eqa_bouton:focus-visible
	{
	outline:2px solid #000;
	outline-offset:3px;
	}

/* ***************************************************************************
 * Bandeau Instagram en bas de page (bloc_instagram.php)
 * *************************************************************************** */

.instagram
	{
	margin:6vw 0 0;
	}

.instagram .ig_lien
	{
	position:relative;
	display:block;
	min-height:200px;
	padding:0;
	background:#1a1a1a;
	color:#fff;
	font-size:inherit;
	}

.instagram .ig_photos
	{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:4px;
	}

.instagram .ig_photo
	{
	display:block;
	aspect-ratio:1 / 1;
	overflow:hidden;
	}

.instagram .ig_photo img
	{
	display:block;
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover;
	transition:transform .8s ease;
	}

.instagram .ig_lien::after
	{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.4);
	transition:background-color .3s;
	}

.instagram .ig_lien:hover::after
	{
	background:rgba(0,0,0,.52);
	}

.instagram .ig_lien:hover .ig_photo img
	{
	transform:scale(1.05);
	}

.instagram .ig_lien:focus-visible
	{
	outline:3px solid #d8252c;
	outline-offset:-3px;
	}

.instagram .ig_texte
	{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:16px;
	text-align:center;
	color:#fff;
	}

.instagram .ig_texte i
	{
	margin:0 0 12px;
	font-size:3.6rem;
	}

.instagram .ig_titre
	{
	font-size:clamp(2.2rem,3.4vw,4.6rem);
	font-weight:300;
	letter-spacing:.03em;
	line-height:1.1;
	text-transform:uppercase;
	}

.instagram .ig_compte
	{
	margin:10px 0 0;
	font-size:clamp(1.5rem,1.4vw,2rem);
	font-weight:600;
	}

/* ***************************************************************************
 * Ecrans etroits
 * *************************************************************************** */

@media (max-width: 810px)
	{
	.expertises .head .tit
		{
		margin:70px auto 30px;
		font-size:3rem;
		}

	/* Deux colonnes : la premiere tuile en pleine largeur, puis deux par ligne */
	.expertises .exp_grille
		{
		grid-template-columns:repeat(2,1fr);
		}

	.expertises .exp_tuile,
	.expertises .exp_tuile.exp_large + .exp_tuile.exp_large
		{
		grid-column:span 1;
		height:200px;
		}

	.expertises .exp_tuile.exp_large:first-child
		{
		grid-column:span 2;
		height:240px;
		}

	.expertises .exp_nom
		{
		font-size:1.5rem;
		}

	main > section.equipe_accueil
		{
		grid-template-columns:1fr;
		margin:70px auto 20px;
		}

	.equipe_accueil .eqa_photo::before
		{
		display:none;
		}
	}

@media (max-width: 640px)
	{
	.instagram .ig_photos
		{
		grid-template-columns:repeat(3,1fr);
		}

	.instagram .ig_photo:nth-child(n+4)
		{
		display:none;
		}
	}