/*
 * Réalisations 2026 : la fiche (toit, dalle du récit ou escalier, dalle cyan, autres réalisations) et les cartes de l'archive.
 * Chargé sur tout le site (navigation AJAX). Formes rl-* dans img/formes-2026.svg, matières du DESIGN.md.
 */

/* ---------- Le toit : la dalle d'intro des archives, en deux colonnes. */
.main-center .intro.real-hero{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 300px;
	gap:2rem 3.5rem;
	align-items:center;
	margin-top:2rem;
	padding:2.5rem 3rem 3rem;
	text-align:left;
	font-weight:400;
}
.real-hero h1{
	margin:0 0 .9rem;
	font-family:'Bebas', sans-serif;
	font-weight:200;
	font-size:3rem;
	line-height:1.02;
	letter-spacing:.5px;
	text-wrap:balance;
}
.real-metas{
	margin:0 0 1.4rem;
	font-family:'Muli', sans-serif;
	font-size:.95rem;
	color:#8fedf9;
}
.real-metas span + span::before{
	content:' · ';
	color:rgba(255,255,255,.45);
}
.real-metas strong{
	font-weight:600;
	color:#fff;
}
.real-metas a{
	color:#fff;
	text-decoration-color:rgba(255,255,255,.45);
	text-underline-offset:3px;
}
.real-metas a:hover,
.real-metas a:focus{
	text-decoration-color:#fff;
}
.real-chapo{
	margin:0;
	max-width:34rem;
	font-size:1.15rem;
	line-height:1.6;
	color:#fff;
}
.real-hero .article-visuel{
	width:300px;
	margin:0;
}
.real-hero .article-visuel__cadre{
	clip-path:url(#rl-visuel);
}

/* ---------- Les blocs minéraux de la fiche (à la façon de l'À propos : fond en ::before découpé). */
.rl-bloc{
	position:relative;
	isolation:isolate;
	margin:3.5rem 0 0;
	padding:2.75rem 3rem 3rem;
	font-size:1.05rem;
	line-height:1.65;
}
.rl-bloc::before{
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
}
.rl-bloc h2{
	margin:0 0 .9rem;
	font-family:'Bebas', sans-serif;
	font-weight:700;
	font-size:2rem;
	line-height:1.05;
	color:#fff;
}
.rl-bloc p + h2,
.rl-bloc ul + h2{
	margin-top:1.75rem;
}
.rl-bloc p{
	margin:0;
}
.rl-bloc p + p{
	margin-top:.75rem;
}
.rl-bloc ul{
	margin:.5rem 0 0;
	padding:0;
	list-style:none;
}
.rl-bloc li{
	position:relative;
	padding-left:1.4rem;
	margin:.5rem 0;
}
.rl-bloc li::before{
	content:'–';
	position:absolute;
	left:0;
	color:#7ef3ff;
}
.rl-bloc a{
	color:#8fedf9;
}
.rl-surtitre{
	display:block;
	margin-bottom:.35rem;
	font-weight:200;
	font-size:1.5rem;
	letter-spacing:1px;
	color:#7ef3ff;
}

/* La dalle sombre du récit : texte à gauche, vignette « site dans l'ordinateur » à droite. */
.rl-bloc--sombre{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 300px;
	gap:2rem 3rem;
	align-items:start;
	color:#dfe9ec;
}
.rl-bloc--sombre::before{
	background:#0b2530;
	clip-path:url(#rl-recit);
}
.rl-bloc__capture{
	margin:1.5rem -4rem 0 0;
	transform:rotate(1.5deg);
}
.rl-bloc__capture img{
	display:block;
	width:100%;
	height:auto;
	clip-path:url(#rl-capture);
}

/* L'escalier (récit long) : une marche par époque, de plus en plus claire, alternée gauche / droite. */
.rl-marche{
	width:72%;
	color:#dfe9ec;
}
.rl-marche:nth-child(odd){
	margin-left:auto;
}
.rl-marche::before{
	clip-path:url(#rl-recit);
}
.rl-marche:nth-child(odd)::before{
	transform:scaleX(-1);
}
.rl-marche--1::before{ background:#0b2530; }
.rl-marche--2::before{ background:rgb(28,42,56); }
.rl-marche--3::before{ background:rgb(40,76,112); }
.rl-marche--4::before{ background:rgb(69,124,145); }
.rl-marche--5::before{ background:rgb(66,185,199); }
.rl-marche--6::before{ background:#0b1119; }
.rl-marche--5,
.rl-marche--5 h2,
.rl-marche--5 .rl-surtitre,
.rl-marche--5 li::before{
	color:#0b1119;
}
.rl-marche--5 a{
	color:#06171c;
}

/* « Ce que ça change » : la dalle cyan, texte bleu nuit, bouton jaune. */
.rl-bloc--cyan{
	display:grid;
	grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);
	gap:2rem 3rem;
	align-items:center;
	margin-bottom:4.5rem;
	color:#06171c;
}
.rl-bloc--cyan::before{
	background:#36bcd3;
	clip-path:url(#rl-change);
}
.rl-bloc--cyan h2{
	color:#06171c;
}
.rl-bloc--cyan p{
	font-size:1.1rem;
	color:#06171c;
}
.rl-bloc--cyan a{
	color:#06171c;
}
.rl-bloc__action{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	gap:.25rem;
}
.rl-bloc__action p{
	font-weight:600;
}
/* Le bouton jaune des pages 2026 : un parallélogramme net, pas le bouton de l'accueil (fait pour chevaucher le portrait). */
.rl-bouton{
	display:inline-block;
	margin:.9rem 0 0;
	padding:1.1rem 1.6rem .85rem;
	background:#ffe76f;
	color:#12587a;
	font-family:'Bebas', sans-serif;
	font-weight:700;
	font-size:1.5rem;
	line-height:1;
	letter-spacing:1px;
	text-decoration:none;
	clip-path:polygon(0 18%, 94% 0, 100% 100%, 4% 90%);
	transition:background-color .2s ease-out, color .2s ease-out;
}
.rl-bouton:hover,
.rl-bouton:focus{
	background:#ea4f46;
	color:#fff;
	outline:none;
}
.rl-bouton:focus-visible{
	outline:2px solid #06171c;
	outline-offset:3px;
}
.real-offre{
	margin-top:.75rem;
	font-family:'Muli', sans-serif;
	font-weight:700;
	text-underline-offset:4px;
	text-decoration-thickness:1px;
}
.real-offre::after{
	content:' →';
}

/* ---------- Les cartes : le client sous la fonctionnalité (fiche et archive). */
.bloc-item-article h2 small{
	display:block;
	margin-top:.5rem;
	font-family:'Bebas', sans-serif;
	font-weight:200;
	font-size:1.1rem;
	letter-spacing:.5px;
	color:#3b8ea0;
}
.real-fiche .titre-reals{
	margin:1rem 0 .5rem;
}
.blocs.blocs--reals{
	margin-bottom:3rem;
}
/* Archive : le texte d'intro n'est plus en Muli 100. */
.post-type-archive-portfolio .main-center .intro{
	font-weight:400;
}
.post-type-archive-portfolio .main-center .intro p{
	max-width:40rem;
	margin:0 auto;
	font-size:1.1rem;
	line-height:1.6;
}

/* ---------- Écrans étroits : une colonne, les marches pleine largeur. */
@media (max-width:860px){
	.main-center .intro.real-hero,
	.rl-bloc--sombre,
	.rl-bloc--cyan{
		grid-template-columns:minmax(0, 1fr);
	}
	.real-hero .article-visuel{
		width:220px;
	}
	.rl-bloc__capture{
		width:240px;
		margin:1.5rem auto 0;
	}
	.rl-marche{
		width:100%;
	}
	.rl-bloc{
		padding:2rem 1.5rem 2.25rem;
	}
	.real-hero h1{
		font-size:2.4rem;
	}
}

/* ---------- Les rangs de trois cartes sur mobile : une rangée qu'on fait glisser, la carte suivante dépasse du bord.
   (fiches, pages d'offres, bloc blog de l'accueil ; l'archive garde sa grille de deux colonnes.) */
@media (max-width:780px){
	.blocs.blocs--reals,
	.blocs.blocs--accueil{
		flex-wrap:nowrap;
		justify-content:flex-start;
		gap:.75rem;
		margin:1rem calc((100vw - 100%) / -2) 2rem;
		padding:0 1rem 1rem;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;
		scroll-padding:0 1rem;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.blocs.blocs--reals::-webkit-scrollbar,
	.blocs.blocs--accueil::-webkit-scrollbar{
		display:none;
	}
	.blocs--reals .bloc-item,
	.blocs--accueil .bloc-item{
		flex:0 0 72vw;
		min-width:0;
		max-width:300px;
		margin:0;
		scroll-snap-align:start;
	}
	.blocs--reals .bloc-item:last-child,
	.blocs--accueil .bloc-item:last-child{
		margin-right:1rem;
	}
}
/* L'accueil a ses propres règles mobiles pour ces cartes (pages-2026.css) : on les surpasse ici avec la même rangée. */
@media (max-width:780px){
	.accueil-2026 .encart-home--noir .blocs.blocs--accueil{
		display:flex;
		flex-wrap:nowrap;
		gap:.75rem;
		width:auto;
		max-width:none;
		margin:1rem calc((100vw - 100%) / -2) 2rem;
		padding:0 1rem 1rem;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding:0 1rem;
	}
	.accueil-2026 .encart-home--noir .blocs--accueil .bloc-item.bloc-item{
		flex:0 0 72vw;
		width:auto;
		max-width:300px;
		min-height:0;
		margin:0;
		scroll-snap-align:start;
	}
	.accueil-2026 .encart-home--noir .blocs--accueil .bloc-item.bloc-item:last-child{
		margin-right:1rem;
	}
}
@media (max-width:780px){
	/* Dans la rangée, les cartes de l'accueil reprennent le pied de carte des fiches (la petite grille les serrait). */
	.accueil-2026 .encart-home--noir .blocs--accueil .bloc-item .article-thumb{
		padding-bottom:4rem;
	}
	.accueil-2026 .encart-home--noir .blocs--accueil .bloc-item .a-wrap{
		left:-2rem;
		right:-2rem;
		bottom:-2rem;
	}
	.accueil-2026 .encart-home--noir .blocs--accueil .bloc-item h2{
		padding:2.75rem 1.5rem 2.25rem;
		font-size:1.2rem;
		line-height:1.3;
	}
}
/* Dans la rangée, les cartes des fiches et des pages d'offres reprennent elles aussi le pied de carte des grandes cartes
   (blog-2026.css les resserre sous 500 px pour la grille de deux colonnes, où elles font 170 px de large, pas 300). */
@media (max-width:780px){
	.blocs--reals .bloc-item.bloc-item-article .article-thumb{
		padding-bottom:4rem;
	}
	.blocs--reals .bloc-item.bloc-item-article .a-wrap{
		left:-2rem;
		right:-2rem;
		bottom:-2rem;
	}
	.blocs--reals .bloc-item.bloc-item-article h2{
		padding:2.75rem 1.5rem 2.25rem;
		font-size:1.2rem;
		line-height:1.3;
	}
	.blocs--reals .bloc-item.bloc-item-article h2 small{
		font-size:1rem;
	}
}