/* ==========================================================================
   Page Notre entreprise : Régie du Croset
   Séquence cinématique : ouverture (texte à gauche, disque + deux orbites à
   droite : valeurs, puis chiffres et icônes de services), mot de la
   directrice, frise chronologique épinglée avec curseur, slogan plein écran,
   valeurs, vidéos YouTube et appel à l'action final (3 accès). Réutilise les
   tokens du design system (main.css) et la classe rdc-reveal pour les
   sections sobres.
   ========================================================================== */

/* 01 · Ouverture : texte à gauche, disque + orbites décalés à droite -------- */
.rdc-ent-open {
	position: relative;
	background: #fff;
	overflow: hidden;
	padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px);
}
/* Volontairement plus large que le conteneur habituel des autres pages
   (--container), pour laisser l'animation respirer à droite de l'écran. */
.rdc-ent-open-shell {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: clamp(20px, 4vw, 56px);
}
.rdc-ent-open-breadcrumb { margin-bottom: clamp(20px, 4vw, 40px); }
.rdc-ent-open-breadcrumb .rdc-breadcrumb { font-size: 12.5px; opacity: 0.75; }

.rdc-ent-open-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(32px, 6vw, 64px);
}
/* Seuil aligné sur le desktop (>= 1081px) : entre 960 et 1080px, la colonne de
   texte (jusqu'à 440px) ne laissait plus assez de place à l'orbite pleine
   taille, dont les icônes de service (seules vraies cibles cliquables de la
   piste) se retrouvaient tronquées au bord de l'écran en tablette paysage. */
@media (min-width: 1081px) {
	.rdc-ent-open-grid { grid-template-columns: minmax(320px, 440px) 1fr; }
}

.rdc-ent-open-inner {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	max-width: 46ch; text-align: left;
}
.rdc-ent-open-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
	color: var(--color-accent);
}
.rdc-ent-open-filet { width: 32px; height: 2px; border-radius: 2px; background: var(--color-accent-border); }
.rdc-ent-open-title {
	margin: 0; color: var(--text-heading);
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(35px, 4vw, 54px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}
.rdc-ent-open-lead {
	margin: 0; max-width: 52ch;
	font-size: clamp(16px, 1rem + 0.2vw, 18px); line-height: 1.6; color: var(--text-muted);
}
/* Mobile : titre et texte d'ouverture centrés (au lieu d'alignés à gauche,
   incohérent avec le reste de la mise en page empilée). */
@media (max-width: 720px) {
	.rdc-ent-open-inner { align-items: center; text-align: center; }
	.rdc-ent-open-eyebrow { justify-content: center; }
	/* Plus d'air sous la nav, titre un cran plus petit. */
	.rdc-ent-open { padding-top: 56px; }
	.rdc-ent-open-title { font-size: 31px; }
	/* Le trait avant l'intitulé le décentrerait visuellement (comme sur l'accueil). */
	.rdc-ent-open-filet { display: none; }
	.rdc-ent-open-lead { margin-inline: auto; }
}

/* Colonne de l'animation : centrée en mobile, poussée vers la droite dès que
   le texte passe à gauche en deux colonnes. */
.rdc-ent-orbit-wrap { display: flex; justify-content: center; }
@media (min-width: 1081px) {
	.rdc-ent-orbit-wrap { justify-content: flex-end; }
}

/* Orbites : conteneur carré, rings superposés en pleine taille. Les rayons
   (--r2/--r3) partent de l'extérieur du disque central (min(36vw,340px), donc
   rayon jusqu'à 170px) pour ne jamais passer derrière lui. */
.rdc-ent-orbit {
	position: relative;
	width: min(52vw, 620px);
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	--r2: min(24vw, 230px);
	--r3: min(30vw, 300px);
	--r-mobile: 110px; /* utilisé uniquement <= 720px, cf. media query plus bas */
}
@media (max-width: 1080px) {
	.rdc-ent-orbit { width: min(92vw, 520px); }
}
.rdc-ent-orbit-ring {
	position: absolute;
	inset: 0;
	animation: rdc-ent-orbit-spin var(--dur, 100s) linear infinite;
}
.rdc-ent-orbit-ring.is-reverse { animation-direction: reverse; }
@keyframes rdc-ent-orbit-spin { to { transform: rotate(360deg); } }

/* Piste visuelle (anneau très fin, à peine visible) par rayon de ring. */
.rdc-ent-orbit-ring--2::before,
.rdc-ent-orbit-ring--3::before,
.rdc-ent-orbit-ring--mobile::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	border-radius: 50%;
	border: 1px solid var(--border-subtle);
	transform: translate(-50%, -50%);
}
.rdc-ent-orbit-ring--2::before { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); }
.rdc-ent-orbit-ring--3::before { width: calc(var(--r3) * 2); height: calc(var(--r3) * 2); }
.rdc-ent-orbit-ring--mobile::before { width: calc(var(--r-mobile) * 2); height: calc(var(--r-mobile) * 2); }

.rdc-ent-orbit-ring--2 { --radius: var(--r2); }
.rdc-ent-orbit-ring--3 {
	--radius: var(--r3);
	/* Seules les icônes de service sont de vraies cibles : le reste de la
	   piste laisse passer le survol/clic (voir .rdc-ent-orbit-item--icon). */
	pointer-events: none;
}
/* Orbite mobile (cercle unique, voir plus bas) : masquée par défaut, affichée
   uniquement <= 720px à la place des deux rings ci-dessus. */
.rdc-ent-orbit-ring--mobile {
	--radius: var(--r-mobile);
	display: none;
	pointer-events: none;
}

/* Position fixe sur le cercle (rotation + translation + rotation inverse :
   place l'élément sur le cercle sans lui faire hériter l'angle). */
.rdc-ent-orbit-pos {
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(var(--angle) * -1));
}
/* Contre-rotation dynamique : annule exactement la rotation du ring parent
   (même durée, sens opposé) pour que l'élément reste toujours droit. */
.rdc-ent-orbit-counter {
	position: absolute;
	top: 0; left: 0;
	animation: rdc-ent-orbit-counter-spin var(--dur, 100s) linear infinite reverse;
}
.rdc-ent-orbit-ring.is-reverse .rdc-ent-orbit-counter { animation-direction: normal; }
@keyframes rdc-ent-orbit-counter-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.rdc-ent-orbit-item { display: inline-flex; align-items: center; justify-content: center; }
.rdc-ent-orbit-item--value {
	padding: 7px 14px; border-radius: var(--radius-pill);
	background: #fff; box-shadow: var(--shadow-card);
	font-size: 12.5px; font-weight: 600; color: var(--text-heading);
	white-space: nowrap;
}
.rdc-ent-orbit-item--num {
	padding: 9px 16px; border-radius: var(--radius-pill);
	background: #fff; box-shadow: var(--shadow-card);
	font-size: 12.5px; font-weight: 700; color: var(--color-accent);
	white-space: nowrap;
}
/* Icône de service : seule vraie cible cliquable du cercle, infobulle au
   survol ET au focus clavier (nom accessible porté par aria-label sur le lien). */
.rdc-ent-orbit-item--icon {
	position: relative;
	width: 44px; height: 44px; border-radius: 50%;
	background: #fff; color: var(--color-accent);
	box-shadow: var(--shadow-card);
	pointer-events: auto;
	text-decoration: none;
	transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.rdc-ent-orbit-item--icon:hover,
.rdc-ent-orbit-item--icon:focus-visible { box-shadow: var(--shadow-hover); transform: scale(1.08); }
.rdc-ent-orbit-item--icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.rdc-ent-orbit-tip {
	position: absolute; bottom: calc(100% + 10px); left: 50%;
	transform: translate(-50%, 4px);
	background: var(--text-heading); color: #fff;
	font-size: 11.5px; font-weight: 600; white-space: nowrap;
	padding: 4px 10px; border-radius: var(--radius-pill);
	opacity: 0; pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.rdc-ent-orbit-item--icon:hover .rdc-ent-orbit-tip,
.rdc-ent-orbit-item--icon:focus-visible .rdc-ent-orbit-tip { opacity: 1; transform: translate(-50%, 0); }

/* Pause de la rotation du cercle contenant les icônes de service (ring--3 en
   desktop/tablette, ring--mobile en mobile) au survol/focus d'une icône
   (classe posée en JS sur le ring concerné) : la rotation ne doit jamais
   empêcher le clic. */
.rdc-ent-orbit-ring.is-orbit-paused,
.rdc-ent-orbit-ring.is-orbit-paused .rdc-ent-orbit-counter {
	animation-play-state: paused;
}

/* Disque central, socle blanc qui surélève le logo : même couleur que le
   fond, mais rendu bien perceptible par une ombre douce et diffuse (portée
   propre sur le disque + halo plus large en calque séparé, animé à l'entrée
   dans entreprise.js). */
.rdc-ent-open-disc {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 2;
	width: min(36vw, 340px); aspect-ratio: 1 / 1; border-radius: 50%;
	background: #fff;
	/* Élévation par ombres extérieures uniquement : le disque reste d'un blanc
	   pur (un calque d'ombre enfant se peignait par-dessus son fond). */
	box-shadow:
		0 40px 80px -24px rgba(30, 28, 26, 0.22),
		0 18px 36px -14px rgba(30, 28, 26, 0.14),
		0 2px 6px rgba(30, 28, 26, 0.05);
	display: flex; align-items: center; justify-content: center;
}
.rdc-ent-open-disc-shadow { display: none; }
.rdc-ent-open-disc-logo { width: 64%; height: auto; }

@media (max-width: 720px) {
	/* Mobile : un seul cercle (rdc-ent-orbit-ring--mobile, construit en PHP à
	   partir des valeurs prioritaires + des services ; les chiffres clés n'y
	   figurent pas, faute de place) au lieu
	   des deux rings du bureau, qui tournaient à des vitesses différentes et
	   finissaient par se chevaucher. Disque et logo central réduits pour
	   libérer de la place autour. */
	.rdc-ent-orbit-ring--2,
	.rdc-ent-orbit-ring--3 { display: none; }
	.rdc-ent-orbit-ring--mobile { display: block; }

	.rdc-ent-orbit {
		width: min(82vw, 300px);
		--r-mobile: 120px;
	}
	.rdc-ent-open-disc { width: min(26vw, 96px); }

	/* Libellés un peu plus petits ; chaque pilule prend la largeur de son texte
	   (un mot-valeur s'intercale entre deux icônes, il y a donc la place). */
	.rdc-ent-orbit-item--value,
	.rdc-ent-orbit-item--num {
		width: auto;
		white-space: nowrap;
		text-align: center;
		font-size: 11px;
		line-height: 1.2;
		padding: 4px 9px;
	}
	.rdc-ent-orbit-item--icon { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.rdc-ent-orbit-ring,
	.rdc-ent-orbit-counter { animation: none; }
	.rdc-ent-orbit-item--icon,
	.rdc-ent-orbit-tip { transition: none; }
	.rdc-ent-orbit-item--icon:hover,
	.rdc-ent-orbit-item--icon:focus-visible { transform: none; }
}

/* 02 · Le mot de la directrice ------------------------------------------------
   Composition éditoriale centrée : eyebrow + citation en typo display, vidéo
   grande (16/9, contrôles Vimeo natifs), texte court réparti en deux colonnes
   équilibrées en dessous. */
.rdc-ent-mot { background: var(--surface-card); padding: clamp(64px, 9vw, 108px) 0; }
.rdc-ent-mot-inner {
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(32px, 4.6vw, 48px);
	text-align: center;
}
.rdc-ent-mot-head {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	max-width: 760px;
}
.rdc-ent-mot-quote { margin: 0; border: 0; padding: 0; }
.rdc-ent-mot-quote-text {
	margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--text-heading);
	font-size: clamp(26px, 3.4vw, 40px); line-height: 1.28; letter-spacing: -0.01em; text-wrap: balance;
}

/* Vidéo grande et centrée : 78 % du conteneur sur desktop, pleine largeur en
   dessous du point de rupture mobile. Format natif 16/9 (composant partagé,
   non recadré) : les contrôles Vimeo/YouTube restent entièrement accessibles. */
.rdc-ent-mot-video { width: min(100%, 900px); }

/* Texte court réparti en deux colonnes équilibrées (magazine), lecture en
   toutes lettres alignée à gauche pour le confort de lecture. */
.rdc-ent-mot-body {
	width: min(100%, 900px);
	columns: 2;
	column-gap: clamp(28px, 4vw, 48px);
	text-align: left;
}
.rdc-ent-mot-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--text-body); break-inside: avoid; }
.rdc-ent-mot-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
	.rdc-ent-mot-body { columns: 1; }
}
/* Mobile : une seule colonne, texte centré comme le titre au-dessus (la mise
   en page « magazine » alignée à gauche n'a de sens qu'avec deux colonnes). */
@media (max-width: 720px) {
	.rdc-ent-mot-body { text-align: center; }
}

/* 03 · Frise chronologique épinglée ------------------------------------------ */
.rdc-ent-timeline-section {
	position: relative;
	background: var(--surface-page);
	padding: clamp(56px, 8vw, 96px) 0;
	overflow: hidden;
}
.rdc-ent-timeline-section.is-pinned {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 5vw, 56px) 0;
}
.rdc-ent-timeline-glow { position: absolute; top: 0; bottom: 0; width: 42%; pointer-events: none; }
.rdc-ent-timeline-glow--left { left: -14%; background: radial-gradient(55% 55% at 30% 50%, rgba(154, 36, 33, 0.18), transparent 72%); }
.rdc-ent-timeline-glow--right { right: -14%; background: radial-gradient(55% 55% at 70% 50%, rgba(154, 36, 33, 0.18), transparent 72%); }
.rdc-ent-timeline-head { position: relative; z-index: 1; }

.rdc-ent-timeline-viewport {
	position: relative; z-index: 1;
	margin-top: clamp(32px, 5vw, 56px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.is-pinned .rdc-ent-timeline-viewport { overflow: hidden; scroll-snap-type: none; }

.rdc-ent-timeline-track {
	position: relative;
	display: flex;
	width: max-content;
	gap: clamp(40px, 4vw, 64px);
	list-style: none;
	margin: 0;
	padding: 40px clamp(24px, 12vw, 22vw);
}
.rdc-ent-timeline-track::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 2px;
	background: var(--border-subtle);
	transform: translateY(-50%);
}
/* Ligne de progression rouge : largeur pilotée en JS (0 à 100 %) au fil du
   défilement, par-dessus la ligne grise ci-dessus. */
.rdc-ent-tl-fill {
	position: absolute;
	left: 0; top: 50%; width: 100%; height: 2px;
	transform: translateY(-50%);
	list-style: none;
	pointer-events: none;
}
.rdc-ent-tl-fill span { display: block; height: 100%; width: 0%; background: var(--color-accent); }

/* Chaque période prend beaucoup de place à l'écran (défilement horizontal
   cinématique) : une large majorité de la largeur visible sur desktop. */
.rdc-ent-tl-step {
	position: relative; z-index: 1;
	flex: 0 0 auto;
	width: clamp(260px, 62vw, 900px);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	text-align: center;
	scroll-snap-align: center;
	opacity: 0.55;
	transition: opacity var(--duration-base) var(--ease-out);
}
.rdc-ent-tl-step.is-active { opacity: 1; }
.rdc-ent-tl-year {
	order: 1;
	font-family: var(--font-display); font-weight: 700; color: var(--color-accent);
	font-size: clamp(30px, 5vw, 64px); line-height: 1;
	white-space: nowrap;
	transition: color var(--duration-base) var(--ease-out);
}
/* Mise en valeur de la période active par la couleur/opacité uniquement : pas
   de déplacement (ni du bloc, ni de l'année, ni du texte), pour que la petite
   pastille reste toujours exactement sur le trait qui se remplit (seul repère
   de progression). Un précédent effet de léger soulèvement/mise à l'échelle
   décalait la pastille de la ligne au changement d'étape et donnait une
   impression de saccade. */
.rdc-ent-tl-step.is-active .rdc-ent-tl-year { color: var(--rdc-red-800); }
.rdc-ent-tl-dot {
	order: 2;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--surface-page); border: 3px solid var(--color-accent);
}
.rdc-ent-tl-text {
	order: 3; margin: 0; font-size: clamp(14.5px, 1.4vw, 17px); line-height: 1.55; color: var(--text-body);
	max-width: 42ch;
}

@media (max-width: 640px) {
	.rdc-ent-tl-step { width: 82vw; }
}

.rdc-ent-timeline-control { position: relative; z-index: 1; margin-top: clamp(24px, 4vw, 40px); }
.rdc-ent-tl-range-label {
	display: block; margin-bottom: 16px;
	font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
	color: var(--text-muted);
}
.rdc-ent-tl-range-wrap { position: relative; max-width: 560px; padding-top: 34px; }
.rdc-ent-tl-range {
	width: 100%; appearance: none; -webkit-appearance: none;
	height: 4px; border-radius: 2px; background: var(--border-strong);
	cursor: pointer;
}
.rdc-ent-tl-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--color-accent); border: 3px solid var(--surface-card);
	box-shadow: var(--shadow-card);
}
.rdc-ent-tl-range::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-card);
	background: var(--color-accent); box-shadow: var(--shadow-card);
}
.rdc-ent-tl-range:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.rdc-ent-tl-range-bubble {
	position: absolute; top: 0; left: 0; transform: translate(-50%, 0);
	background: var(--color-accent); color: #fff; font-weight: 700; font-size: 12.5px;
	padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
	pointer-events: none;
	/* Le curseur (pastille du contrôle « Parcourir la frise ») glisse jusqu'à sa
	   nouvelle position au lieu de sauter : la valeur « left » est recalculée en
	   JS à chaque pas d'année, cette transition l'anime. */
	transition: left 260ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.rdc-ent-tl-step,
	.rdc-ent-tl-year,
	.rdc-ent-tl-text,
	.rdc-ent-tl-range-bubble { transition: none; }
}

/* 04 · Slogan cinématique ----------------------------------------------------- */
.rdc-ent-slogan {
	position: relative;
	min-height: 60vh;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface-card);
	overflow: hidden;
	padding: clamp(56px, 9vw, 96px) 0;
}
.rdc-ent-slogan.is-pinned { min-height: 100vh; }
.rdc-ent-slogan-mark {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: min(70vw, 620px); height: auto; opacity: 0.06;
	pointer-events: none; user-select: none;
}
.rdc-ent-pulses { position: absolute; inset: 0; pointer-events: none; }
.rdc-ent-pulse {
	position: absolute; top: 50%; left: 50%;
	width: 140px; height: 140px; margin: -70px 0 0 -70px;
	border-radius: 50%; border: 1px solid rgba(154, 36, 33, 0.28);
	animation: rdc-ent-pulse 7s ease-out infinite;
}
.rdc-ent-pulse--2 { animation-delay: 2.3s; }
.rdc-ent-pulse--3 { animation-delay: 4.6s; }
@keyframes rdc-ent-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(6.4); opacity: 0; }
}
.rdc-ent-slogan-text {
	position: relative; z-index: 1;
	margin: 0; text-align: center; text-wrap: balance;
	font-family: var(--font-display); font-weight: 700; color: var(--text-heading);
	font-size: clamp(30px, 5.2vw, 74px); line-height: 1.05; letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) {
	.rdc-ent-pulse { animation: none; opacity: 0; }
}

/* 05 · Valeurs (compact) ------------------------------------------------------ */
.rdc-ent-values { background: var(--surface-page); padding: clamp(48px, 6.5vw, 76px) 0; }
.rdc-ent-values-grid {
	margin-top: clamp(24px, 3.4vw, 36px);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px);
}
.rdc-ent-value {
	padding: 18px 18px; border-radius: var(--radius-lg);
	background: var(--surface-card); border: 1px solid var(--border-subtle);
	transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.rdc-ent-value:hover,
.rdc-ent-value:focus-within { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-accent-border); }
.rdc-ent-value-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: var(--radius-md);
	background: var(--color-accent-tint); color: var(--color-accent); margin-bottom: 10px;
	transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.rdc-ent-value:hover .rdc-ent-value-ico,
.rdc-ent-value:focus-within .rdc-ent-value-ico { background: var(--color-accent); color: #fff; }
.rdc-ent-value-title { margin: 0 0 4px; font-size: 15.5px; color: var(--text-heading); }
.rdc-ent-value-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
	.rdc-ent-value, .rdc-ent-value-ico { transition: none; }
	.rdc-ent-value:hover, .rdc-ent-value:focus-within { transform: none; }
}
@media (max-width: 980px) { .rdc-ent-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .rdc-ent-values-grid { grid-template-columns: 1fr; } }

/* 06 · Nos vidéos (widget Elfsight YouTube) ----------------------------------- */
.rdc-ent-youtube { background: var(--surface-card); padding: clamp(56px, 8vw, 96px) 0; }
.rdc-ent-youtube-widget { margin-top: clamp(24px, 3vw, 40px); min-height: 160px; }

/* 07 · Appel à l'action final : 3 accès --------------------------------------- */
.rdc-ent-final { position: relative; overflow: hidden; background: var(--color-accent); padding: clamp(64px, 9vw, 104px) 0; }
.rdc-ent-final-head { position: relative; z-index: 1; margin-bottom: clamp(32px, 4.6vw, 52px); }
.rdc-ent-final-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 24px); }
.rdc-ent-final-card {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	padding: clamp(22px, 2.4vw, 30px);
	border-radius: var(--radius-xl);
	background: #fff; color: var(--text-heading);
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.rdc-ent-final-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); text-decoration: none; }
.rdc-ent-final-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-hover); }
.rdc-ent-final-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: var(--radius-lg);
	background: var(--color-accent-tint); color: var(--color-accent);
}
.rdc-ent-final-title { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: var(--text-heading); }
.rdc-ent-final-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.rdc-ent-final-arrow { margin-top: auto; align-self: flex-end; color: var(--color-accent); transition: transform var(--duration-base) var(--ease-out); }
.rdc-ent-final-card:hover .rdc-ent-final-arrow { transform: translateX(4px); }
@media (max-width: 860px) { .rdc-ent-final-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.rdc-ent-final-card, .rdc-ent-final-arrow { transition: none; }
	.rdc-ent-final-card:hover { transform: none; }
	.rdc-ent-final-card:hover .rdc-ent-final-arrow { transform: none; }
}