/* Espace Méthode 3R — styles front.
   Volontairement sobres : la typographie et les couleurs du thème sont conservées.
   Trois variables suffisent à tout recaler sur la charte Rĕsurgo. */

.r3r-espace {
	--r3r-trait: rgba(0, 0, 0, .13);
	--r3r-encre: currentColor;
	--r3r-repos: rgba(0, 0, 0, .03);
	max-width: 62rem;
	margin: 0 auto;
}

.r3r-espace :where(h2, h3, h4) { margin-top: 0; }

/* En-tête et sommaire ---------------------------------------------------- */

.r3r-entete {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--r3r-trait);
}
.r3r-entete p { margin: 0; }

.r3r-sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	padding: .9rem 0 0;
	font-size: .95rem;
}

.r3r-section { padding-top: 3.5rem; scroll-margin-top: 5rem; }
.r3r-chapeau { max-width: 46ch; opacity: .8; }
.r3r-vide { opacity: .7; font-style: italic; }

/* Auto-diagnostic -------------------------------------------------------- */

.r3r-diagnostic { border-left: 3px solid var(--r3r-encre); padding-left: 1.4rem; }

/* Accueil de la bibliothèque : les cinq étapes --------------------------- */

.r3r-etapes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	list-style: none;
	margin: 2rem 0 3.5rem;
	padding: 0;
	background: var(--r3r-trait);
	border: 1px solid var(--r3r-trait);
}

.r3r-etape a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	height: 100%;
	padding: 1.6rem 1rem 1.4rem;
	background: #fff;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: background .18s ease;
}
.r3r-etape a:hover,
.r3r-etape a:focus-visible { background: var(--r3r-repos); }

.r3r-etape__rang { font-size: .78rem; letter-spacing: .06em; opacity: .45; }
.r3r-etape__dessin { display: block; width: 62px; height: 62px; }
.r3r-etape__nom { font-weight: 600; line-height: 1.25; }
.r3r-etape__compte { font-size: .82rem; opacity: .6; }

/* Illustration : SVG livré ou image déposée */

.r3r-illustration,
.r3r-illustration svg,
.r3r-illustration img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Listes de documents ---------------------------------------------------- */

.r3r-groupe { margin-bottom: 3.25rem; scroll-margin-top: 5rem; }

.r3r-groupe__entete {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding-bottom: .8rem;
	border-bottom: 2px solid var(--r3r-encre);
}
.r3r-groupe__entete p { margin: .2rem 0 0; opacity: .75; }
.r3r-groupe__dessin { flex: 0 0 auto; width: 46px; height: 46px; }

.r3r-liste { list-style: none; margin: 0; padding: 0; }

.r3r-document {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--r3r-trait);
}
.r3r-document h4 { margin: 0 0 .15rem; font-size: 1.02rem; }
.r3r-document p { margin: 0; font-size: .88rem; opacity: .7; }

/* Vidéos ----------------------------------------------------------------- */

.r3r-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2.5rem 2rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.r3r-video h3 { margin: .9rem 0 .2rem; font-size: 1.05rem; }

.r3r-video__cadre {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--r3r-repos);
	overflow: hidden;
}
.r3r-video__cadre img,
.r3r-video__cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.r3r-video__lecture {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: rgba(0, 0, 0, .28);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.r3r-video__lecture:hover,
.r3r-video__lecture:focus-visible { background: rgba(0, 0, 0, .45); }

.r3r-video__meta { margin: 0 0 .5rem; font-size: .85rem; opacity: .65; }
.r3r-video__texte p { margin: 0 0 .5rem; font-size: .92rem; }

/* Boutons et connexion --------------------------------------------------- */

.r3r-espace .r3r-bouton {
	display: inline-block;
	padding: .55rem 1.15rem;
	border: 1px solid var(--r3r-encre);
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.r3r-espace .r3r-bouton:hover,
.r3r-espace .r3r-bouton:focus-visible { background: var(--r3r-encre); color: #fff; }

.r3r-connexion { max-width: 26rem; }

.r3r-espace :focus-visible { outline: 2px solid var(--r3r-encre); outline-offset: 3px; }

/* Adaptation aux petits écrans ------------------------------------------ */

@media (max-width: 860px) {
	.r3r-etapes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.r3r-etapes { grid-template-columns: 1fr; }
	.r3r-etape a { flex-direction: row; gap: 1rem; text-align: left; padding: 1rem; }
	.r3r-etape__dessin { width: 42px; height: 42px; }
	.r3r-document .r3r-bouton { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.r3r-espace * { transition: none !important; }
}